如何使用 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>