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

Using JavaScript would be an easy solution. Get all the buttons from your DOM and save them as JavaScript object. Add two field for each button (id and clicked: true or false). When user select a button change the status of that button from false to true and keep counting how many buttons are selected. When the count hits 3, stop taking any new inputs. — Shahid, Nov 16 '17 at 09:01

score 0 · Accepted Answer · answered Nov 16 '17 at 09:31

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>

Thanks for you help. Actually I managed to finally resolve this in another way but your answer gave me an insight. — AidanAnimates, Nov 16 '17 at 12:37
glad to hear.... but kindly note that my approach is completely js; no jquery involved; so if u have a requirement of no-jquery, this would still help u.. — Rajkumar Somasundaram, Nov 16 '17 at 12:39

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

1 Answers1