@LoaiEsam37
Posted
i have a suggestion but i do not think it is the best but i use it in my project and i think it`s good to think out the box, you can add the button event listener inside the rating buttons event listener so that it start listening for the button when the rating buttons get clicked like this:
const ratingState = document.getElementById("rating--state");
const thankyouState = document.getElementById("thank__you--state");
const submitButton = document.getElementById("submit__rating");
const ratingSpan = document.getElementById("rating");
const ratingButtons = document
.getElementsByClassName("card__btns")[0]
.getElementsByTagName("button");
Object.values(ratingButtons).forEach((e) => {
e.addEventListener("click", () => {
ratingSpan.innerHTML = e.innerHTML;
submitButton.addEventListener("click", () => {
ratingState.classList.add("hidden");
thankyouState.classList.remove("hidden");
});
});
});
and this is my sourcecode
happy coding!!!
Marked as helpful
@Petrosdevri
Posted
@LoaiEsam37 I see your point but I am not sure how you manage to get all your ratingButttons if you have added the index [0] at the beginning. It would also be appreciated if you point out the exact part where your button is disabled (in any file of your project) as I couldn't figure it out on the HTML and JS files.
@LoaiEsam37
Posted
@Petrosdevri I selected the with [0] for the class of the parent for the buttons not the buttons themselves :
const ratingButtons = document
.getElementsByClassName("card__btns")[0]
.getElementsByTagName("button");
the another thing about the part where my button is disabled, look my button event listener is nested inside the rating buttons listener:
/// ratingButtons event listener
Object.values(ratingButtons).forEach((e) => {
e.addEventListener("click", () => {
ratingSpan.innerHTML = e.innerHTML;
/// submitButton event listener
submitButton.addEventListener("click", () => {
ratingState.classList.add("hidden");
thankyouState.classList.remove("hidden");
});
});
});
that means that the submit button listener is not begin to work until the rating buttons get clicked
Marked as helpful
@Petrosdevri
Posted
@LoaiEsam37 Oh yes, I misread it, it's indeed pointing out only to the class.
And yeah I understood your point, thanks a lot for the explanation!
