The button only works once
Question
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.
2 answers
solution1
3 2017-09-14 12:27:36
Please check the below code. just use a boolean eg 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>
solution2
1 2017-09-14 12:26:33
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.