Question

我做了两个按钮，其中一个说“一个”，另一个说“两个”。我要这样做，以便当您单击一个按钮约50次后，第二个按钮将起作用。

let number = 0;
function increase() {
for (var i = 0; i < 1; i++) {
  document.getElementById("number").innerHTML = number += 1;
}
}

 if (number = 50) {function double() {
for (var i = 0; i < 2; i++) {
document.getElementById("number").innerHTML = number += 1;
}
}
}

.button1border {
border: black 3px solid;
margin: 10px 1280px 0px 0px;
width: 60px;
}

<!DOCTYPE="html">
<html>
 <link rel="stylesheet" type="text/css" href="/style.css">
<button type="button" onclick="increase()">
  by 1
</button>
  <button onclick="double()">
    by 2
  </button>
  <div class="button1border">
    number:
    <div id="number">
      
  </div>
  </div>
<script src="script.js" type="text/javascript"></script>
</html>

单击第二个按钮时，数字立即变为50，而不是该按钮不起作用。有人可以尝试解决此问题，以便当数字达到50（50次单击）时，第二个按钮起作用？如果数字低于50，则第二个按钮不起作用。

Answer 1

缩进是您的朋友，您的函数也是回调，它们仅在绑定到元素的事件上触发时执行

let number = 0;

function increase() {
  document.getElementById("number").innerHTML = number += 1;
}

function double() {
  if (number >= 50) {
    for (var i = 0; i < 2; i++) {
      increase();
    }
  }
}

.button1border {
  border: black 3px solid;
  margin: 10px 1280px 0px 0px;
  width: 60px;
}

<!DOCTYPE="html">
<html>
<link rel="stylesheet" type="text/css" href="/style.css">
<button type="button" onclick="increase()">
  by 1
</button>
<button onclick="double()">
    by 2
  </button>
<div class="button1border">
  number:
  <div id="number">

  </div>
</div>
<script src="script.js" type="text/javascript"></script>

</html>

Answer 2

您可以定位第二个按钮，并且按钮元素具有属性disabled。因此，当您增加数字时，请检查您的数字是否> = 50并禁用它disable = false

let number = 0;
function increase() {
for (var i = 0; i < 1; i++) {
  document.getElementById("number").innerHTML = number += 1;
}
}

 if (number = 50) {function double() {
for (var i = 0; i < 2; i++) {
document.getElementById("number").innerHTML = number += 1;
}
}
}

<!DOCTYPE="html">
<html>
 <link rel="stylesheet" type="text/css" href="/style.css">
<button type="button" onclick="increase()">
  by 1
</button>
  <button onclick="double()">
    by 2
  </button>
  <div class="button1border">
    number:
    <div id="number">
      
  </div>
  </div>
<script src="script.js" type="text/javascript"></script>
</html>

var number = 0;
let btnTwo = document.getElementById("btnTwo");
function increase() {
for (var i = 0; i < 1; i++) {
  document.getElementById("number").innerHTML = number += 1;
}
  if(number >= 50){
    btnTwo.disabled = false;
  }
}

 if (number == 50) {function double() {
for (var i = 0; i < 2; i++) {
document.getElementById("number").innerHTML = number += 1;
}
}
}

.button1border {
border: black 3px solid;
margin: 10px 1280px 0px 0px;
width: 60px;
}

<!DOCTYPE="html">
<html>
 <link rel="stylesheet" type="text/css" href="/style.css">
<button type="button" onclick="increase()">
  by 1
</button>
  <button id="btnTwo" onclick="double()" disabled>
    by 2
  </button>
  <div class="button1border">
    number:
    <div id="number">
      
  </div>
  </div>
<script src="script.js" type="text/javascript"></script>
</html>

类似tihs。

Answer 3

您真的不需要在这里进行for循环。

    let number = 0;
    function increase() {
     if (number <= 50) {
      document.getElementById("number").innerHTML = number += 1;
       }
}
function double() {
     if (number > 50) {
    document.getElementById("number").innerHTML = number += 2;
    }
    }

.button1border {
border: black 3px solid;
margin: 10px 1280px 0px 0px;
width: 60px;
}

<!DOCTYPE="html">
<html>
 <link rel="stylesheet" type="text/css" href="/style.css">
<button type="button" onclick="increase()">
  by 1
</button>
  <button onclick="double()">
    by 2
  </button>
  <div class="button1border">
    number:
    <div id="number">
      
  </div>
  </div>
<script src="script.js" type="text/javascript"></script>
</html>

如何使在单击按钮一定次数后执行的功能？

3 个答案: