Interactive Rating Component

Community feedback

• 

  Loai Esam•670

  @LoaiEsam37Posted over 1 year ago

  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

  0

  ---

  

  Petros Devrikis•380

  @PetrosdevriPosted over 1 year ago

  @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.

  1

  

  Loai Esam•670

  @LoaiEsam37Posted over 1 year ago

  @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

  0

  

  Petros Devrikis•380

  @PetrosdevriPosted over 1 year ago

  @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!

  1