-1

当涉及到 HTML5 操作时，我是一个完全的新手，如果您愿意，我真的想要一些帮助来解决一个非常具体的问题？

我有 12 个方块（按钮），每个按钮从一罐 12 个中抽取一个随机答案。每次选择一个按钮并显示答案时，按钮就会消失。到目前为止，我已经完成了所有这些工作。

The next step is that I want the user to only be able to choose 3 of the 12 buttons - any three, entirely at random and when the 3 have been selected the rest become inactive.

你能提供的任何帮助都会对我有帮助，

（顺便说一句，我通过 Adob​​e Animate CC 工作）

谢谢，

艾丹

4

1 回答 1

0

单击第三个按钮后；每隔一个按钮禁用；

let buttons = document.getElementsByClassName("activeButton")
let noOfButtonsClicked = 0;
for (i = 0; i < buttons.length; i++) {
  buttons[i].onclick = function(e) {
    noOfButtonsClicked += 1;
    document.getElementById("chosenRandomNumber").innerHTML = Math.floor(Math.random() * (20));
    e.path[0].classList += " clickedButton"
    if (noOfButtonsClicked == 3) {
      disableButtons();
    }
  }
}

function disableButtons() {
  for (i = 0; i < buttons.length; i++) {

    if (!buttons[i].classList.contains('clickedButton')) {
      buttons[i].setAttribute('disabled', true);
    }
  }
}
<button class="activeButton">Button 1</button>
<button class="activeButton">Button 2</button>
<button class="activeButton">Button 3</button>
<button class="activeButton">Button 4</button>
<button class="activeButton">Button 5</button>
<button class="activeButton">Button 6</button>
<button class="activeButton">Button 7</button>
<button class="activeButton">Button 8</button>
<button class="activeButton">Button 9</button>
<button class="activeButton">Button 10</button>
<button class="activeButton">Button 11</button>
<button class="activeButton">Button 12</button>

<div id="chosenRandomNumber">
</div>

于 2017-11-16T09:31:16.073 回答