Question

我刚刚开始学习Javascript，我试图使用Javascript为网页编写点击计数器的代码。我知道我们必须使用cookie来获取正确的数字，并使用PHP来修改存储在服务器中的数据。但是，请你帮我调试一下吗？我得到的输出为＆＃34;访客人数为：NaN＆＃34;

这是我的代码：

＆＃13;

Answer 1

您需要使用parseInt

<script> 
    function counter_fn(){
       var counter = document.getElementById("cntr");
       var count = 0;
       count = parseInt(counter.value);
       count = count+1;
       counter.innerHTML = parseInt(count);
    }
    window.onload = counter_fn;  
 </script>

<强>更新

由@Anurag Singh Bisht评论，you cannot get value from a span element。因此，要从<span>获取价值，您需要使用$('span').text();

<html>
    <body>
        <div id="cntr"> 
            The number of visitors is : 
            <span>0</span>
        </div>

       <script> 
            function counter_fn(){
                var counter = $('#cntr span').text(); // geting value from span
                var count = 0;
                count = parseInt(counter.value);
                count = count+1;
                counter.innerHTML = parseInt(count);
           }
           window.onload = counter_fn;  
      </script>
    </body>
</html>

Answer 2

您需要将字符串解析为整数，并且需要获取innerHTML。

<script> 
  function counter_fn(){
    var counterElement = document.getElementById("cntr")
    var counterNumber = parseInt(counterElement.innerHTML)
    counterNumber = counterNumber + 1
    counterElement.innerHTML = counterNumber
  }
  window.onload = counter_fn;  
</script>

正确的方法是将此值存储在其他位置，例如localStorage并从那里读取它。您不应该阅读自己的HTML来更新值。 HTML元素应该是结果，而不是您的输入。

var counterNumber = 1

if (localStorage.getItem("count")) {
  counterNumber = parseInt(localStorage.getItem("count")) + 1
}
else {
  localStorage.setItem("count", counterNumber)
}

Answer 3

您正试图从value元素中获取span，这是错误的。您的counter.value为undefined，因此它会给您错误的答案。

您可以使用0从span获取document.getElementById("cntr").innerHTML。但返回的值是string。因此，您需要parseInt将其转换为integer，然后您的添加才会为您提供正确的值。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div>
    <p>The number of visitors is : <span id="cntr">0</span></p>
  </div>

  <script>
    function counter_fn() {
      var counter = document.getElementById("cntr");
      var count = 0;
      count = parseInt(counter.innerHTML);
      count = count + 1;
      counter.innerHTML = count;
    }
    window.onload = counter_fn;
  </script>
</body>

</html>

Javascript点击计数器

3 个答案: