否则发送按钮 EventListener

Question

我有一个包含 3 个可点击图像的反馈表，用于用户满意度评分： [1]: https://i.stack.imgur.com/hsUkd.png

javascript 相当陌生。当我运行我的脚本上的 .addeventListener 时，它在第一个 if 语句上工作，如果我删除 elses，它会交替在哪个 if 运行s 上工作。下面是 html 和 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>

和 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>
    `;
    }
});

我试过使用 :

ev.currentTarget.id == "myId"

我的 if 块中的函数并为每个块尝试了不同的事件侦听器，但没有用。

我想到了使用

button.tagName === "myId"

在我的 if 中的某个时刻声明，但我对所有 3 个都使用一个按钮。

请帮忙

Answer 1

在全局变量中跟踪活动评论并在 select 编辑新评论时更新它，并在单击按钮时更新它。

这样您就不必单独 select 所有元素并检查哪个元素具有 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>

或者，您可以单独检查哪个元素中包含 active class。

此外，我建议避免使用 innerHTML 设置内容，而是创建一个元素并附加它。

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

Answer 2

考虑您编写的代码：

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

当用作条件时，

sad、meh 和 happy 都计算为 true。由于第一个 if 的条件评估为 true，因此每次只有该块运行。

您应该检查 sad、meh 和 happy 中的哪个元素具有 active class.

请改用以下代码

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

添加到上面的答案。如果您只想添加和删除它，也可以使用切换按钮。

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>
    `;
    }
});

否则发送按钮 EventListener

send button EventListener if else

html

javascript

css

jquery

event-handling