Если условия (возможно) Предоставление пользователю 3 из 12 шансов при выборе кнопок

Question

Я полный новичок, когда дело доходит до действий HTML5, и мне бы очень хотелось помочь, чтобы выяснить очень специфическую проблему, если бы вы?

У меня 12 квадратов (кнопок), каждая кнопка тянет один случайный ответ из банка 12. Каждый раз, когда выбирается одна кнопка и отображается ответ, кнопка исчезает. Пока у меня все это работает.

Следующим шагом является то, что я хочу, чтобы пользователь мог выбрать только 3 из 12 кнопок - любые три, полностью случайным образом, и когда 3 были выбраны, остальные становятся неактивными.

Любая помощь, которую вы можете оказать, действительно поможет мне,

(кстати я работаю через Adobe Animate CC)

Спасибо,

Айдан

Answer 1

После нажатия третьей кнопки; любая другая кнопка отключается;

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>