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;
}

在单击另一个按钮之前，如何禁用HTML按钮？

2 个答案: