Question

我试图制作一个点击游戏，当点击达到一定数量时，会发生一些事情。什么都没发生。关于为什么我添加的if语句在达到十次点击次数时没有做任何事情的想法？

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Clicker</title>
    <script src="counter.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>
    <style>
        body{
            text-align: center;
            background-image: url("https://gift-frog.com/wp-content/uploads/2016/06/off-white-textured-background-1920x10803.jpg");
        }
        h1{
            font-size: 100px;
            color: #372424;
        }
        h3{
            color: #372424;
        }
        h2{
            color: #372424;
        }
        *.unselectable {
            -moz-user-select: -moz-none;
            -khtml-user-select: none;
            -webkit-user-select: none;

            /*
              Introduced in IE 10.
              See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
            */
            -ms-user-select: none;
            user-select: none;
        }
    </style>
</head>
<body id="body" onclick="doClick()">
    <nav class="navbar navbar-dark navbar-inverse">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">
    &#9776;
  </button>
  <div class="collapse" id="exCollapsingNavbar">
    <div class="bg-inverse p-a-1">
      <h4>Your Statistics</h4>
      <span class="text-muted">graph in development</span>
        <br>
        <h4>Rank</h4>
        <progress class="progress progress-success" value="bob" max="500"></progress>
    </div>
  </div>
</nav>
    <div class="container">
  <div class="row">
    <div class="col-sm-4">
    </div>
    <div class="col-sm-4">
      <h1 class="unselectable">Clicked <h1 class="unselectable" id="counter">0</h1></h1> <h1 class="unselectable">times</h1>
    </div>
    <div class="col-sm-4">
    </div>
  </div>
</div>


</body>
</html>

这是javascript for it。

    /**
 * Created by Illuminati on 9/8/2016.
 */
var clicks = 0;
var multiplyer = 0;

function doClick() {
    clicks = clicks + 1;
    var theCounter = document.getElementById('counter');
    theCounter.textContent = clicks;
}
if(clicks == 10){
    alert("test");
}

Answer 1

将条件移动到函数内部。除此之外，它只在页面加载时被读取，它始终是错误的。

Answer 2

您只运行过一次if块，但只要用户点击按钮，您的事件处理程序就会运行。

这样的事情：

function doClick() {
    clicks += 1;
    var theCounter = document.getElementById('counter');
    theCounter.textContent = clicks;
    if(clicks == 10){
      alert("test");
    }
}

另外，counter = counter + 1也可以使用，clicks += 1，而不是这样做。{/ p>

如果是自动闪烁的声明

2 个答案: