CODEWITHSUNDEEP
javascripthtml
Sajjad
Sajjad

Reputation: 41

The button only works once

The following code on the website page creates a button that the user receives a random number at any time by clicking the button: 

<!DOCTYPE HTML>

<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title>rand100.html</title>
 <style type = "text/css">
 fieldset {
  width: 600px;
  margin-right: auto;
  margin-left: auto;
 }
 label {
  float: left;
  width: 250px;
  text-align: right;
  margin-right: 1em;
  clear: left;
 }
 span {
  float: left;
 }
 button {
  display: block;
  clear: both;
  margin: auto;
 }
 </style>
 <script type = "text/javascript">
 function roll(){
  //create variables for form elements
  var spnRaw = document.getElementById("spnRaw");
  var spn100 = document.getElementById("spn100");
  var spnFinal = document.getElementById("spnFinal");
  //get random number
  var raw = Math.random();
  spnRaw.innerHTML = raw;
  //multiply by 100
  var times100 = raw * 100;
  spn100.innerHTML = times100;
  //get the ceiling
  var final = Math.ceil(times100);
  spnFinal.innerHTML = final;
 } // end roll
 </script>
</head>
<body>
 <h1>Make random numbers 1 - 100</h1>
 <form>
  <fieldset>
   <label>raw</label>
   <span id = "spnRaw">0</span>
   <label>times 100</label>
   <span id = "spn100">0</span>
   <label>final</label>
   <span id = "spnFinal">0</span>
   <button type = "button"
     onclick = "roll()">
    roll the dice
   </button>
  </fieldset>
 </form>
</body>
</html>

Now I want to make every user receive just one random number, that is, if the user clicks on the button and receives a random number, and again clicking on the button, this time a new random number will not be displayed. That is, each user, if more than once, clicks the button, only receives a random number, no more. How can I do this now? That is to change the code so that even if the user after opening the site and clicking the button and then receiving the random number, clicked the button again, a new random number will not be received.

Upvotes: 0

Views: 1296

Answers (2)

Alex Chuev
Alex Chuev

Reputation: 713

You can define the value before the function:

var random = Math.random();

function roll() {
  ...
}

Or set it inside the function only if it is undefined:

var random;

function roll() {
  if (typeof random === 'undefined') {
    random = Math.random();
  }

  ...
}

Or create some flag:

var rolled = false;

function roll() {
  if (rolled) {
    return;
  }

  ...

  rolled = true;
}

Or remove an event listener from the button:

function roll() {
  ...

  button.onclick = null;
}

The link to the button object you can get from the event object:

function roll(event) {
  ...

  event.target.onclick = null;
}

Upvotes: 1

Deepak Pandey
Deepak Pandey

Reputation: 628

Please check the below code. just use a boolean e.g doRoll variable and set it to true. When you call roll() for the first time set the boolean variable to false after getting the random number.

<!DOCTYPE HTML>

<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title>rand100.html</title>
 <style type = "text/css">
 fieldset {
  width: 600px;
  margin-right: auto;
  margin-left: auto;
 }
 label {
  float: left;
  width: 250px;
  text-align: right;
  margin-right: 1em;
  clear: left;
 }
 span {
  float: left;
 }
 button {
  display: block;
  clear: both;
  margin: auto;
 }
 </style>
 <script type = "text/javascript">
 var doRoll = true;

 function roll(){
  if(doRoll)
  {
  //create variables for form elements
  var spnRaw = document.getElementById("spnRaw");
  var spn100 = document.getElementById("spn100");
  var spnFinal = document.getElementById("spnFinal");
  //get random number
  var raw = Math.random();
  spnRaw.innerHTML = raw;
  //multiply by 100
  var times100 = raw * 100;
  spn100.innerHTML = times100;
  //get the ceiling
  var final = Math.ceil(times100);
  spnFinal.innerHTML = final;
  doRoll = false;
 }
 } // end roll
 </script>
</head>
<body>
 <h1>Make random numbers 1 - 100</h1>
 <form>
  <fieldset>
   <label>raw</label>
   <span id = "spnRaw">0</span>
   <label>times 100</label>
   <span id = "spn100">0</span>
   <label>final</label>
   <span id = "spnFinal">0</span>
   <button type = "button"
     onclick = "roll()">
    roll the dice
   </button>
  </fieldset>
 </form>
</body>
</html>

Upvotes: 3

Related Questions