Question

我正在尝试设置一个代码，您可以在其中单击一个按钮，并且每次单击该按钮时，它都会在计数器中添加“一个”。然后，我希望代码在计数器达到某个数字时停止，在这种情况下为5。对于某些情况，我无法使代码的停止部分正常工作。如何使if语句起作用，以便当计数器达到该数字时代码将停止？

<!DOCTYPE html>

<html>

<head>
<title>Counter</title>
 </head>

<body>
    <script type="text/javascript">
    var clicks = 0;
    function onClick() {
        clicks += 1;
        document.getElementById("clicks").innerHTML = clicks;
    };


      if (clicks < 5) {
  continue;
} else {
  break;
}
    </script>
    <button type="button" onclick="onClick()">Click me</button>
    <p>Clicks: <a id="clicks">0</a></p>

</body>

</html>

Answer 1

var clicks = 0;
function onClick() {
  if(clicks < 5) {
    clicks += 1;
    document.getElementById("clicks").innerHTML = clicks;
  }
}

Answer 2

您可以在计数器达到5时禁用该按钮

var clicks = 0;
    function onClick() {
        clicks += 1;
        document.getElementById("clicks").innerHTML = clicks;
         if (clicks == 5) {
      document.getElementById("button").disabled = true;
}
    };

<!DOCTYPE html>

<html>

<head>
<title>Counter</title>
 </head>

<body>
    
    <button type="button" id="button" onclick="onClick()">Click me</button>
    <p>Clicks: <a id="clicks">0</a></p>

</body>

</html>

或者我们可以一起删除函数调用。

点击达到5点后，我们从按钮中删除了onclick函数调用。

    var clicks = 0;
    function onClick() {
        clicks += 1;
        document.getElementById("clicks").innerHTML = clicks;
        
      if (clicks == 5) {
      document.getElementById("button").removeAttribute("onclick");
      }
    };

<!DOCTYPE html>

<html>

<head>
<title>Counter</title>
 </head>

<body>
   
    <button type="button" id="button" onclick="onClick()">Click me</button>
    <p>Clicks: <a id="clicks">0</a></p>

</body>

</html>

Answer 3

您需要检查onClick方法内的条件，当条件满足时，您可以从函数中return，而无需执行下一个代码，如下所示：

var clicks = 0;

function onClick()
{
    if (clicks >= 5)
        return;

    clicks += 1;
    document.getElementById("clicks").innerHTML = clicks;
};

<button type="button" onclick="onClick()">Click me</button>
<p>Clicks: <a id="clicks">0</a></p>

Answer 4

当您在continue中时，通常使用

break和loop。在continue和break中，您无法继续/中断任何操作。每次单击按钮都会调用该函数。您可以通过clicks语句检查5是否小于或等于if，然后执行某些操作。试试这个：

var clicks = 0;
onClick = function() {
  if(clicks <= 5) {
    clicks++;
    document.getElementById("clicks").innerHTML = clicks;
  }
  /* else {
    clicks = 0;
    document.getElementById("clicks").innerHTML = clicks;
  } */
};

<button type="button" onclick="onClick()">Click me</button>
<p>Clicks: <a id="clicks">0</a></p>

Answer 5

您的代码存在的问题是您没有在if函数中放入“检查”（onClick语句）。因此，if块只能运行一次（加载页面时），这显然不是您想要的。

我写了一个最小的例子，类似于我想你试图做的事。我希望这会有所帮助：

<html>
    <body>
        <p>Clicks: <a id="clicks">0</a></p>
        <button type="button" onclick="onClick()">Click Me</button>

        <script>
var clicks = 0;
function onClick() {
    if(clicks < 5) { clicks++; }
    document.getElementById("clicks").innerHTML = clicks;
}

        </script>
    </body>
</html>

此外，您对continue和break的使用有点放错地方。这些通常在循环中使用。

break ：执行break语句时，循环立即跳出。

continue ：执行continue语句时，不会运行其余的循环代码，但会继续循环（并且在for循环中，也会运行递增条件）

您可以阅读有关继续并中断here.

的信息

计数器达到一定数量时如何停止代码

5 个答案: