@ozzy1136
Posted
Great job with this one!
Strictly related to the question you asked, I think it would be easier to use radio buttons instead of regular buttons. This way, you can check if a value was submitted for the rating. This solution uses the FormData API, which has great browser support.
A simple example:
// index.html
...
<form>
<label>1
<input type="radio" name="rating" value="one" />
</label>
// More radio buttons with labels
...
<input type="submit" value="Submit" />
</form>
...
// app.js
const formEl = document.querySelector("form");
formEl.addEventListener("submit", (e) => {
e.preventDefault();
new FormData(e.target);
}
formEl.addEventListener("formdata", (e) => {
// e.formData is a JavaScript iterator object, so you have to loop over it
// data will be in the form of [name, value]
// You could also do for (const [name, value] of e.formData) {...}
for (const data of e.formData) {
if (data[0] === "rating") {
// There was a rating button selected
...
}
}
// There was not a rating button selected
...
}
Check the MDN Web Docs for more information about FormData. Using radio buttons with labels also takes more effort to make the buttons look how you need to, so I would suggest you look for guides that go over this.
I imagine you could loop over the radio buttons on submit and test for a checked value instead.
Marked as helpful
@great1greta
Posted
@ozzy1136 Hi Ozmar, thank you SO much for taking time to explain this to me! This is super helpful! ♥️ cant wait to explore this further
