发送按钮 EventListener 否则

如何解决发送按钮 EventListener 否则

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

对 JavaScript 相当陌生。当我在我的脚本上运行 .addeventListener 时，它在第一个 if 语句上工作，如果我删除 elses，它会交替运行 if 。 下面是 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 个都使用一个按钮。

请帮忙

解决方法

在全局变量中跟踪活动评论并在选择新评论时更新它，并在点击按钮时更新它。

这样做您不必逐一选择所有元素并检查哪个元素具有 active 类。

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 类。

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

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

,

考虑您编写的代码：

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

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

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

请改用以下代码

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

,

补充上面的答案。 如果您只想添加和删除它，也可以使用切换开关。

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