按鈕只能使用一次

的網站頁面上下面的代碼創建用戶通過點擊該按鈕隨時接收隨機數的按鈕：按鈕只能使用一次

<!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>

現在我想讓每個用戶收到一張隨機數，也就是說，如果用戶點擊按鈕並接收到一個隨機數，並再次點擊該按鈕，這次不會顯示新的隨機數。也就是說，每個用戶，如果不止一次點擊按鈕，只會收到一個隨機數，不會再有。現在我該怎麼做？即更改代碼，以便即使用戶打開網站並點擊按鈕，然後接收隨機數，再次單擊該按鈕，將不會收到新的隨機數。

來源

2017-09-14 Sajjad

如同一個隨機數** ever **，或每個頁面載入一個隨機數？ – adeneo

爲什麼不在第一次點擊後禁用按鈕？ – Winter

我想設置按鈕，以便只有一個用戶可以點擊一次，如果它不再點擊，它不會做任何事情！ – Sajjad

您可以將功能之前定義的值：

var random = Math.random(); 

function roll() { 
    ... 
}

或將其設置只有當它是未定義在函數內部：

var random; 

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

    ... 
}

或者創建一些標誌：

var rolled = false; 

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

    ... 

    rolled = true; 
}

或者從按鈕中移除事件監聽器：

function roll() { 
    ... 

    button.onclick = null; 
}

到按鈕對象的鏈接，您可以從事件對象得到：

function roll(event) { 
    ... 

    event.target.onclick = null; 
}

來源

2017-09-14 12:26:33

請檢查下面的代碼。只需使用一個布爾例如doRoll變量並將其設置爲true。第一次撥打roll()時，在獲得隨機數後，將布爾變量設置爲false。

<!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>

來源

2017-09-14 12:27:36

按鈕只能使用一次

回答

相關問題