我如何做到这一点，如果你按下一个按钮，然后再按下一个不同的按钮，你会在屏幕上看到一些东西？

Question

好的，所以听起来可能令人困惑，但这是我想要做的：

你有 4 个按钮。 按钮 A、按钮 B、按钮 C 和按钮 D。如果按下按钮 B 和按钮 C，它将显示例如“嗨”。 然后，如果你按 B 和 A，它会说“你好”。 所以我猜不同的按钮组合会给你不同的“结果”。

有人知道我该怎么做吗？ 我对 java 脚本没有太多经验，所以如果有人能帮助我，我将不胜感激。 :-)

Answer 1

所以你有大约 16 种不同的情况来说明你的 Result 可能是什么。

我会为 16 个结果向您推荐一个 swtich case 语句。

您可以为点击事件设置一个 var 来定义案例。

switch(expression) {
case x:
    // code block
return "hi"
    break;
  case y:
    // code block
return "Hello"
    break;
  default:
    // code block
} 

每个按钮组合将为您提供另一个 state 另请参阅W3Schools JS 开关盒

Answer 2

通常，我们不应该为您编写代码和开发解决方案（这不是 Stackoverflow 的重点），但在这种情况下，这只是一个有趣的小练习，所以这里是：

 const combinations = { aa: "You clicked A then A", ab: "Hello AB", ac: "Hi,". //..: cb. "You clicked C then B" //..; }; let firstClicked = null. document.querySelectorAll("button").forEach(button => button,addEventListener("click". function(event) { const letter = event.target;name. if (firstClicked) { console.log(`..;then ${letter}`) const toSay = combinations[firstClicked + letter] || "Nothing to say."; console;log(toSay). firstClicked = null. } else { console.log(`You clicked ${letter}.;.`) firstClicked = letter; } }))

 <button name="a">A</button> <button name="b">B</button> <button name="c">C</button> <button name="d">D</button>

Answer 3

您可以将每个按钮视为 4 位数字中的一个位，给出 16 种组合。 单击按钮时，设置或清除正确的位并显示单词：

 // The 16 words let strings = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et".split(' '); // The index of the current word (binary) let bin = 0; // Add event listeners to each check box let checks = document.getElementsByTagName("input"); for (let item of checks) { item.addEventListener('click', event => { // Get or set the correct bit const val = parseInt(event.srcElement.value); if (event.srcElement.checked) { bin |= val; } else { bin &= ~val; } // Update the output document.getElementById("output").innerHTML = strings[bin]; }); };

 <div> <input type="checkbox" id="A" value="1"> <label for="A">A</label> <input type="checkbox" id="B" value="2"> <label for="B">B</label> <input type="checkbox" id="C" value="4"> <label for="C">C</label> <input type="checkbox" id="D" value="8"> <label for="D">D</label> </div> <div> <span id="output"></span> </div>