在單擊另一個按鈕之前，如何禁用HTML按鈕？

Question

我正在嘗試制作一個游戲，您需要在文本框中輸入數字，然后單擊“ Lock In 。

這樣便無法更改答案。

之后，單擊“ Random Number ，它將為您提供1-50的隨機數。

但是問題是我想讓它在您必須單擊Lock In前才能找到隨機數的位置。

這是因為您不能僅單擊“ Lock In ，然后再對其進行更改以使其正確。

我的代碼如下：

 function numFunction() { var x = Math.floor((Math.random() * 50) + 1); document.getElementById("randnum").innerHTML = x; start.disabled = true; reload.disabled = true; } function btnFunction() { document.getElementById("answerbox").readOnly = true; } function revFunction() { document.getElementById("rnum").disabled = false; } 

 <div id="randbutton"> <button id="rnum" onclick="numFunction()">Random Number</button> <p id="randnum"></p> <input type="text" name="answerbox" size="20" id="answerbox"> <div id="lockbtn"> <button onclick="btnFunction();revFunction();">LockIn</button> <div id="resetbtn"></div> <button id="relbtn" onclick="relFunction()">Reset</button> </div> </div> 

Answer 1

你真的很親近 您可以只在按鈕上添加“已禁用”，然后當用戶鎖定答案時，再次啟用它。

此外，將JavaScript分成許多不同的腳本標記不是最佳實踐。 將它們全部放在一個位置。

 function numFunction() { var x = Math.floor((Math.random() * 50) + 1); document.getElementById("randnum").innerHTML = x; start.disabled = true; reload.disabled = true; } function btnFunction() { document.getElementById("answerbox").readOnly = true; } function revFunction() { document.getElementById("rnum").disabled = false; } function relFunction() { location.reload(); } 

 <div id="randbutton"> <button id="rnum" onclick="numFunction()" disabled>Random Number</button> <p id="randnum"></p> <input type="text" name="answerbox" size="20" id="answerbox"> <div id="lockbtn"> <button onclick="btnFunction();revFunction();">LockIn</button> <div id="resetbtn"></div> <button id="relbtn" onclick="relFunction()">Reset</button> </div> </div> 

Answer 2

您可以使用按鈕上的disabled屬性來啟動。

<button type="button"id="lock" onclick="enableNum()">Lock in</button>
<button type="button"id="randomNum" disabled>Random Number</button>

然后，當有人輸入數字時，您將具有檢測輸入並啟用按鈕的功能。

function enableNum() {
document.getElementById("randomNum").disabled = false;
}