Interactive_rating_component

Community feedback

• 

  Vani•160

  @VANIMEHTAPosted over 2 years ago

  Hi to make your ratings working ill suggest the following changes: 1)In your Html code change the line "( <button class="btn-selected">You selected 4 out of 5</button>)" to : " <div class="success-msg"> You selected <span id="submitted-rating"></span> out of 5 </div>" 2) in java script you can do the changes as :

  const submit1 = document.querySelector(".submit-button"); // selecting class of all the buttons. const submitPage = document.getElementById("submitPage"); //selecting our initial card const successPage = document.getElementById("succes"); //selecting our thank you card const submittedRating = document.getElementById("submitted-rating"); const background = document.getElementById("container3");

  let ratingValue; submit1.addEventListener("click", function () { const checked = document.querySelector('input[name="ratings"]:checked');

  // check to see if a rating is selected if (checked == null) { console.log("null"); } else { // set value to be passed to success page ratingValue = checked.value;

  // toggle current card page
  submitPage.classList.toggle("hide");
  background.classList.toggle("hide");
  // toggle success page
  successPage.classList.toggle("hide");
  
  // set submitted rating
  submittedRating.innerText = ratingValue;
  

  }

  return ratingValue; });

  Marked as helpful

  0