该按钮只能使用一次

Question

网站页面上的以下代码创建了一个按钮，用户可以随时通过单击按钮来接收随机数：

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

现在，我想让每个用户仅收到一个随机数，也就是说，如果用户单击按钮并收到一个随机数，然后再次单击按钮，则这次将不会显示新的随机数。 也就是说，每个用户（如果多次）单击按钮，只会收到一个随机数，而不会再收到。 我现在该怎么做？ 那就是更改代码，以便即使用户在打开站点并单击按钮然后接收到随机数之后再次单击该按钮，也不会收到新的随机数。

Answer 1

请检查以下代码。 只需使用布尔值（例如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>

Answer 2

您可以在函数之前定义值：

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

该按钮只能使用一次

问题描述

2 个解决方案

解决方案1
3 2017-09-14 12:27:36

解决方案2
1 2017-09-14 12:26:33

该按钮只能使用一次

问题描述

2 个解决方案

解决方案1 3 2017-09-14 12:27:36

解决方案2 1 2017-09-14 12:26:33

解决方案1
3 2017-09-14 12:27:36

解决方案2
1 2017-09-14 12:26:33