javascript - 否则发送按钮事件监听器

Question

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

对javascript相当陌生。当我在脚本上运行 .addeventListener 时，它适用于第一个 if 语句，如果我删除 else，它会交替运行 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 个按钮都使用一个按钮。

请帮忙

标签： javascripthtmljquerycssevent-handling

Answer 1

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

这样做您不必单独选择所有元素并检查哪个元素具有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);
});