我如何限制功能-（老虎机）仅5圈-使用do / while循环

Question

I wanna create a slot machine with 3 number by javascript - but I want to finish my function when three numbers are equal. I think that if I write it with do/while it will be work, but I can't do it this is my js code:

 function myF() {
  var slotOne = Math.floor(Math.random() * 3) + 1;
  var slotTwo = Math.floor(Math.random() * 3) + 1;
  var slotThree = Math.floor(Math.random() * 3) + 1;

  document.getElementById("slotOne").innerHTML = slotOne;
  document.getElementById("slotTwo").innerHTML = slotTwo;
  document.getElementById("slotThree").innerHTML = slotThree;

  if(slotOne == slotTwo &&  slotTwo == slotThree) {
    document.getElementById("slotOne").style.backgroundColor = "#48bd48";
    document.getElementById("slotTwo").style.backgroundColor = "#48bd48";
    document.getElementById("slotThree").style.backgroundColor = "#48bd48";
    document.getElementById("winner").classList.add("show");
  }
 }

this function is set onclick attr of a button tag

Answer 1

Adding to comment, if you want to run function for no of times then just use a counter variable to check no of attempts:

Added a reset button to reset the game.

 var counter = 0; function myF() { if (counter != 5) { counter++; document.getElementById("slotLeft").innerHTML = "Try count: " + counter; var slotOne = Math.floor(Math.random() * 3) + 1; var slotTwo = Math.floor(Math.random() * 3) + 1; var slotThree = Math.floor(Math.random() * 3) + 1; document.getElementById("slotOne").innerHTML = slotOne; document.getElementById("slotTwo").innerHTML = slotTwo; document.getElementById("slotThree").innerHTML = slotThree; if (slotOne == slotTwo && slotTwo == slotThree) { document.getElementById("slotOne").style.backgroundColor = "#48bd48"; document.getElementById("slotTwo").style.backgroundColor = "#48bd48"; document.getElementById("slotThree").style.backgroundColor = "#48bd48"; document.getElementById("winner").classList.add("show"); counter = 5; // Edited this line } } else { console.log('Game over'); } } function myF1(){ counter = 0; document.getElementById("slotOne").innerHTML = ""; document.getElementById("slotTwo").innerHTML = ""; document.getElementById("slotThree").innerHTML = ""; } 

 <button onclick="myF()">Check</button> <button onclick="myF1()">Restart Game</button> <div id="slotLeft"> </div> <div id="slotOne"> </div> <div id="slotTwo"> </div> <div id="slotThree"> </div> <div id="winner"> </div> 

Answer 2

  function myF() { var slotOneElem = document.getElementById("slotOne"); var slotTwoElem = document.getElementById("slotTwo"); var slotThreeElem = document.getElementById("slotThree"); var generateRand = function() { return Math.floor(Math.random() * 3) + 1; } return (function () { var slotOne = generateRand(); var slotTwo = generateRand(); var slotThree = generateRand(); slotOneElem.innerHTML = slotOne; slotTwoElem.innerHTML = slotTwo; slotThreeElem.innerHTML = slotThree; if (slotOne === slotTwo && slotTwo === slotThree) { slotOneElem.style.backgroundColor = "#48bd48"; slotTwoElem.style.backgroundColor = "#48bd48"; slotThreeElem.style.backgroundColor = "#48bd48"; document.getElementById("winner").classList.add("show"); // Here is the win return true; } return false; })(); } var finished = myF(); while (!finished) { finished = myF(); }