if conditionals (maybe) Giving a user 3 out of 12 chance when selecting buttons

Question

I'm a complete novice when it comes to HTML5 actions and I'd really like some help trying to figure out a very specific issue if you would?

I have 12 squares (buttons), each button pulls a single random answer from a pot of 12. Each time a single button is selected and the answer is shown the button disappears. So far I have all this working.

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.

Any help you can provide would really help me,

(by the way I work through Adobe Animate CC)

Thanks,

Aidan

Answer 1

After third button is clicked; every other button disables;

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>