Javascript: When all buttons are clicked function

user_16884977 0
Viewed 58

Hello sir I'm practicing my vanilla javascript. I am trying to create a "Hangman Game" when the correct letters are clicked from the buttons.. You win. I have all these buttons in queryselector(letterA to letterZ).

The problem using this function.. the winAlert = visible implements when the letterS was clicked (last letter of "cautious").

So is there a way when you clicked all the letters of cautious in any order the winAlert.style.visibility = "visible" will be execute inside the function?

I've tried everything in the last hours.. buttons.forEach, slice etc. nothing works.

function youWonCautious() {
  var buttons = [letterC, letterA, letterT, letterI, letterU, letterI, letterO, letterS]
  for (var i = 0; i < buttons.length; i++) {
    var button = buttons[0, 1, 2, 3, 4, 5, 6, 7];

    button.onclick = function() {
      winAlert.style.visibility = "visible"

    }
  }
}
click button function arrays javascript
2 Answers

Buttons don't automatically maintain any state about whether they were clicked. You can do this yourself using the dataset property of the button.

Then your function can test whether all the buttons have this property set.

Or maybe you can change your buttons to checkboxes, and use the checked property.

function allButtonsClicked(buttons) {
  return buttons.every(b => b.dataset.chosen == 'true')
}

function youWonCautious() {
  var buttons = [letterC, letterA, letterT, letterI, letterU, letterO, letterS];
  buttons.forEach(button => {
    button.dataset.chosen = 'true';
    if (allButtonsClicked(buttons)) {
      winAlert.style.visibility = "visible";
    }
  });
}

user_14918950

You can create a global array in which log the alphabets clicked by the user. check for the alphabets in the global array variable and answer array. If matches Pass alert message else fail message to user.

user_176231590
Related