在Javascript中定义变量时使用var关键字

在Javascript中定义变量时使用var关键字,javascript,html,Javascript,Html,我在这里读了一些关于定义新变量时使用var关键字的帖子。这些帖子提到了如何在函数中使用var创建具有局部作用域的变量,而不使用var关键字创建具有全局作用域的变量。大多数帖子建议始终使用var。我有几个问题: 我正在学习JS,并试图编写一个脚本来计算按钮被点击的次数(代码见下文)。如果在函数的else部分totalClicksI使用var numclicks=1则以下代码无效。如果我省略var关键字,它就可以工作。这是因为要使代码正常工作,numclicks需要是一个全局变量,还是有其他原因?这

我在这里读了一些关于定义新变量时使用
var
关键字的帖子。这些帖子提到了如何在函数中使用
var
创建具有局部作用域的变量,而不使用
var
关键字创建具有全局作用域的变量。大多数帖子建议始终使用
var
。我有几个问题:

  • 我正在学习JS,并试图编写一个脚本来计算按钮被点击的次数(代码见下文)。如果在函数的
    else
    部分
    totalClicks
    I使用
    var numclicks=1则以下代码无效。如果我省略
    var
    关键字,它就可以工作。这是因为要使代码正常工作,
    numclicks
    需要是一个全局变量,还是有其他原因?这是始终使用
    var
    规则的例外情况,还是有其他编程方法

  • 第一次单击按钮时,输出为
    NaN
    。我不清楚为什么不是1?按照代码的逻辑,在将变量写入文档之前,它似乎被设置为1。我知道如果我添加
    numclick=0,这个问题就会得到解决在函数语句之前。但我不清楚为什么这能解决问题

  • 非常感谢你的帮助

    代码

    <html>
    <head>
        <title>Count number of clicks</title>
    </head>
    <body>
    
        <form>
            <input type="button" value="click here" onclick="totalClicks();">
        </form>
    
    Total clicks: <span id="numclicks"></span>
    
        <script type="text/javascript">
            function totalClicks(){
                if (window.numclicks) {
                    numclicks++;
                }
                else {
                    numclicks = 1;
                }
    
                document.getElementById("numclicks").innerHTML = numclicks;
    
            }
        </script>
    
    </body>
    </html
    
    
    计算点击次数
    点击总数:
    函数totalClicks(){
    if(window.numclicks){
    numclicks++;
    }
    否则{
    numclicks=1;
    }
    document.getElementById(“numclicks”).innerHTML=numclicks;
    }
    试试这个:

    <html>
    <head>
        <title>Count number of clicks</title>
    </head>
    <body>
    
        <form>
            <input type="button" value="click here" onclick="totalClicks();">
        </form>
    
    Total clicks: <span id="numclicks"></span>
    
        <script type="text/javascript">
            function totalClicks(){
                var numClicks = document.getElementById("numclicks").value;
    
                if (numclicks > 0) {
                    numclicks++;
                }
                else {
                    numclicks = 1;
                }
    
                document.getElementById("numclicks").innerHTML = numclicks;
    
            }
        </script>
    
    </body>
    </html>
    
    
    计算点击次数
    点击总数:
    函数totalClicks(){
    var numClicks=document.getElementById(“numClicks”).value;
    如果(numclicks>0){
    numclicks++;
    }
    否则{
    numclicks=1;
    }
    document.getElementById(“numclicks”).innerHTML=numclicks;
    }
    
  • 当然,它需要是一个全局变量

    这是因为一旦到达
    totalClicks()
    函数的末尾,局部变量的作用域就会消失

  • 我不知道是什么原因导致了这种情况,但是在函数外部将numclicks设置为0应该会有所帮助。将window.numclicks设置为0,并始终使用window.numclicks,以便始终可以看到哪个是全局变量。(全球范围通常是非常实用的,尽管在许多语言中它经常受到反对)

  • 第一次定义
    numclicks
    时,它需要位于任何函数之外,以便成为全局函数。使用
    var
    时仍在函数中定义变量,不会使其成为全局变量。对函数中的全局变量使用var将使其成为局部变量

  • 您有一个id为
    numclicks
    的元素,因此默认情况下
    window.numclicks
    指向该元素


  • Slava给出了一个更完整的答案,但请注意,Javascript有一个相当疯狂的提升概念。一旦你明白了,事情就变得很简单,直到你做的事情看起来很奇怪。这里有一篇非常简短的文章:@George Mauer我喜欢这个网站的网页设计:)@George-谢谢你的链接。我查看了这篇文章,但下面的内容仍然不清楚。作者说,“但是函数范围意味着函数中声明的所有变量和参数在该函数中的任何地方都是可见的,甚至在该变量被声明之前。”如果它们在任何地方都是可见的,为什么第一个输出“未定义的”。“随处可见”是什么意思?@Curious2learn,因为您在其中编写了一个非常微妙的bug。在控制台打开的情况下运行,您将看到。它第一次运行时会测试window.numclicks是否存在。你认为没有,对吗?因为你还没有创造它。但你做到了<代码>
    可以(但不应该)通过
    窗口访问。numclicks
    。换句话说,第一次运行时,您得到的是NaN,因为您正在执行
    (span)+
    ,这是
    NaN
    ,第二次计算结果为false,您最终得到了您想要实现的结果。虽然这可能行得通,但它是一个丑陋且低效的全局变量替代品。9。别碰DOM了,该死的!