如何使用 if 语句更改按钮单击时的段落内容？

Question

当有人单击三个按钮之一时，尝试在 p 元素内显示不同的消息。 但它只显示所有按钮的第一条消息（回复）。

看不出我做错了什么...

HTML

<div class="options">
   <div id="good" class="btn"></div>
   <div id="idk" class="btn"></div>
   <div id="bad" class="btn"></div>
</div>

JavaScript

let good = document.getElementById("good");
let idk = document.getElementById("idk");
let bad = document.getElementById("bad");
let main = document.querySelector(".main");
let reply;

document.getElementById("good"), document.getElementById("idk"), document.getElementById("bad")].forEach(option => {
  option.addEventListener("click", () => {
      if (good.clicked = true) {
          main.style.display = "block";
          reply = "Hey";
        } else if (idk.clicked = true) {
          main.style.display = "block";
          reply = "Well yeah";
        } else if (bad.clicked = true) {
          main.style.display = "block";
          reply = "123";
        }
        document.getElementById("reply").innerHTML = reply;
    });
});

Answer 1

如果您的实际用例和您的示例一样简单，我会考虑使用内部具有不同逻辑的不同事件侦听器。 但是如果你想使用相同的事件监听器，那么你可以使用event.target.id来知道点击了哪个按钮：

[document.getElementById("good"), document.getElementById("idk"), document.getElementById("bad")].forEach(option => {
  option.addEventListener("click", (event) => {
    switch (event.target.id) {
      case "good":
        reply = "Hey";
        break;
      case "idk":
        reply = "Well yeah";
        break;
      case "bad":
        reply = "123";
        break;
    }
    main.style.display = "block";
    document.getElementById("reply").innerHTML = reply;
  });
});

在这里你可以看到它在工作（注意我删除了main.style.display = "block";在下面的例子中，因为我不知道你的原始代码中的main是什么）：

 [document.getElementById("good"), document.getElementById("idk"), document.getElementById("bad")].forEach(option => { option.addEventListener("click", (event) => { switch (event.target.id) { case "good": reply = "Hey"; break; case "idk": reply = "Well yeah"; break; case "bad": reply = "123"; break; } document.getElementById("reply").innerHTML = reply; }); });

 <div class="options"> <div id="good" class="btn">good</div> <div id="idk" class="btn">idk</div> <div id="bad" class="btn">bad</div> </div> <div id="reply"/>

Answer 2

它可能是这样的：

 let good = document.getElementById("good"); let idk = document.getElementById("idk"); let bad = document.getElementById("bad"); let main = document.querySelector(".main"); let reply; [good, idk, bad].forEach(option => { option.addEventListener("click", (e) => { if (e.target == good) { main.style.display = "block"; reply = "Hey"; } else if (e.target == idk) { main.style.display = "block"; reply = "Well yeah"; } else if (e.target == bad) { main.style.display = "block"; reply = "123"; } document.getElementById("reply").innerHTML = reply; }); });

 <div class="options"> <div id="good" class="btn">good</div> <div id="idk" class="btn">idk</div> <div id="bad" class="btn">bad</div> </div> <div class="main"><div> <div id="reply"></div>

Answer 3

 const good = document.getElementById("good"); const idk = document.getElementById("idk"); const bad = document.getElementById("bad"); const main = document.querySelector(".main"); const reply = document.getElementById("reply"); const messageTypes = { good: 'Hey', idk: 'Well yeah', bad: '123 BAD' }; [good, idk, bad].forEach(option => { option.addEventListener("click", (e) => { reply.innerHTML = messageTypes[e.target.id]; }); });

 <div class="options"> <button id="good" class="btn">good</button> <button id="idk" class="btn">idk</button> <button id="bad" class="btn">bad</button> </div> <div class="main"><div> <div id="reply"></div>

对所有内容都使用 const，为每条消息创建一个单独的消息字典，并将其映射到 id。 您不需要使用 jQuery。

Answer 4

相反，你可以为你想要的做这样的事情

在纯 VanillaJS 中

[document.getElementById("good"), document.getElementById("idk"), document.getElementById("bad")].forEach(option => {
  option.addEventListener("click", (event) => {
    if (event.target.id == "good") {
      main.style.display = "block";
      reply = "Hey";
    } else if (event.target.id == "idk") {
      main.style.display = "block";
      reply = "Well yeah";
    } else if (event.target.id == "bad") {
      main.style.display = "block";
      reply = "123";
    }
    document.getElementById("reply").innerHTML = reply;
  });
});

Answer 5

=用于赋值，而==用于检查 JavaScript 中两个字符串的相等性

   [] ...addEventListener("click", (e) => {
    if (good.id == e.target.id) {
      main.style.display = "block";
      reply = "Hey";
    } 
    // and so on
    document.getElementById("reply").innerHTML = reply;
  });

 var btn1=document.getElementById('btn1') var btn2=document.getElementById('btn2') var btn3=document.getElementById('btn3') // jquery way $('.btn').on("click",function(e){ $("#msg").html(e.target.id+" clicked"); }) // javascript way var classname = document.getElementsByClassName("btn"); for (var i = 0; i < classname.length; i++) { classname[i].addEventListener("click", function(e){ document.getElementById('msg').innerHTML =e.target.id+' clicked'; }) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <input type="button" id="btn1" class="btn" value="button 1"> <input type="button" id="btn2" class="btn" value="button 2"> <input type="button" id="btn3" class="btn" value="button 3"> <p id="msg"></p>

Answer 6

我很想为每个按钮使用显式事件处理程序，而不是使用通用处理程序来测试所有三个条件。

您可以通过使用一个函数来处理main元素的显示更新和reply的设置，从而减少代码重复。

类似下面的内容显示了这一点：

 let good = document.getElementById("good"); let idk = document.getElementById("idk"); let bad = document.getElementById("bad"); let main = document.querySelector(".main"); good.addEventListener("click", function(e) { showMain("Good"); }); idk.addEventListener("click", function(e) { showMain("Well yeah"); }); bad.addEventListener("click", function(e) { showMain("123"); }); function showMain(replyText) { main.style.display = "block"; document.getElementById("reply").innerHTML = replyText; }

 .main { background-color: red; display: none; height: 100px; width: 100px; }

 <button id="good">Good</button> <button id="idk">Idk</button> <button id="bad">Bad</button> <div class="main"></div> <div id="reply"></div>