否则发送按钮事件监听器

Question

I have a feedback form with 3 clickable images for user satisfaction rating: [1]: https://i.stack.imgur.com/hsUkd.png

Fairly new to javascript. When I run the.addeventListener on my script it works on the first if statement, and if I remove elses it alternates on which if runs. below is the html and javascript:

 <div id="panel" class="panel-container">
      <strong>How satisfied are you with our customer support performance?</strong>
      <div class="ratings-container">
        <div class="rating" id="sad">
          <img src="https://image.flaticon.com/icons/svg/187/187150.svg" alt=""/>
          <small>Unhappy</small>
        </div>
        <div class="rating" id="meh">
          <img src="https://image.flaticon.com/icons/svg/187/187136.svg" alt=""/>
          <small>Neutral</small>
        </div>
        <div class="rating active" id="happy">
          <img src="https://image.flaticon.com/icons/svg/187/187133.svg" alt=""/>
          <small>Satisfied</small>
        </div>
      </div>
      <button class="btn" id="send">Send review</button>
    </div>

and the Javascript:

const ratingsEl = document.querySelectorAll(".rating");
const sendBtn = document.querySelector("#send");
const panel = document.querySelector("#panel");
const sad = document.querySelector("#sad");
const meh = document.querySelector("#meh");
const happy = document.querySelector("#happy");



ratingsEl.forEach((el) => {
  el.addEventListener("click", () => {
    ratingsEl.forEach((innerEl) => {
      innerEl.classList.remove("active");
    });

    el.classList.add("active");
  });
});

sendBtn.addEventListener("click", () => {
    if(sad){
        panel.innerHTML = `
        <p>sad</p>
    `;
    }

     else if(meh){
        panel.innerHTML = `
        <p>meh</p>
    `;
    }
     else if(happy){
        panel.innerHTML = `
        <p>feedack for this</p>
    `;
    }
});

I have tried using the:

ev.currentTarget.id == "myId" 

function in my if blocks and tried a different event listener for each block, but did not work.

i thought of using the

button.tagName === "myId"

statement at some point in my if, but i am using one button for all 3.

Please help

Answer 1

Keep track of the active review in a global variable and update it when a new review is selected and update that when the button is clicked.

Doing so you don't have to individually select all the elements and check which one has the active class.

 const ratingsEl = document.querySelectorAll(".rating"); const sendBtn = document.querySelector("#send"); const panel = document.querySelector("#panel"); let review = "happy"; ratingsEl.forEach((el) => { el.addEventListener("click", (e) => { ratingsEl.forEach((innerEl) => { innerEl.classList.remove("active"); }); el.classList.add("active"); review = el.id; }); }); sendBtn.addEventListener("click", () => { panel.innerHTML = `<p>${review}</p>`; });

 img { width: 20px; }.rating { display: flex; align-items: center; margin: 0.5rem 0; }.rating small { margin-left: 0.5rem; cursor: pointer; }.rating.active small{ font-weight: bold; }

 <div id="panel" class="panel-container"> <strong>How satisfied are you with our customer support performance?</strong> <div class="ratings-container"> <div class="rating" id="sad"> <img src="https://image.flaticon.com/icons/svg/187/187150.svg" alt="" /> <small>Unhappy</small> </div> <div class="rating" id="meh"> <img src="https://image.flaticon.com/icons/svg/187/187136.svg" alt="" /> <small>Neutral</small> </div> <div class="rating active" id="happy"> <img src="https://image.flaticon.com/icons/svg/187/187133.svg" alt="" /> <small>Satisfied</small> </div> </div> <button class="btn" id="send">Send review</button> </div>

Or, you can individually check which element has the active class in it.

Also, I would suggest avoid setting content using innerHTML , instead create an element and append it.

sendBtn.addEventListener("click", () => {
  panel.innerHTML = "";
  const usrReview = document.createElement("p");
  usrReview.innerText = review;
  panel.appendChild(usrReview);
});

Answer 2

Consider the code you have written:

if (sad) {
    // ...
}
else if (meh) {
    // ...
}
else if (happy) {
    // ...
}

sad , meh and happy all evalutes to true when used as a condition. Since the condition of the first if evalutes to true , only that block runs everytime.

You should check which element among the sad , meh and happy has the active class.

Please use the following code instead

sendBtn.addEventListener("click", () => {
    if(sad.classList.contains("active")){
        panel.innerHTML = `
        <p>sad</p>
    `;
    }

    else if(meh.classList.contains("active")){
        panel.innerHTML = `
        <p>meh</p>
    `;
    }

    else if(happy.classList.contains("active")){
        panel.innerHTML = `
        <p>feedack for this</p>
    `;
    }
});

Answer 3

Adding to the answers above. You can also use the toggle if all you want to do is add and remove it.

https://jsfiddle.net/Lmqdhgnj/3/

const ratingsEl = document.querySelectorAll(".rating");
const sendBtn = document.querySelector("#send");
const panel = document.querySelector("#panel");
const sad = document.querySelector("#sad");
const meh = document.querySelector("#meh");
const happy = document.querySelector("#happy");

ratingsEl.forEach((el) => {
  el.addEventListener("click", (event) => {
    toggle(el,"active");
  });
});

function toggle(el, className) {
        el.classList.toggle(className);
}

sendBtn.addEventListener("click", () => {
        console.log(sad.className, meh.className, happy.className)
    if(sad.className.includes("active")){
        panel.innerHTML = `
        <p>sad</p>
    `;
    }

     if(meh.className.includes("active")){
        panel.innerHTML = `
        <p>meh</p>
    `;
    }
    if(happy.className.includes("active")){
        panel.innerHTML = `
        <p>feedack for this</p>
    `;
    }
});