Question

我需要帮助我的网站，或者你想要的是什么。我的想法是，我有一个数字，如果点击一个按钮，我的数字就会增加1.我已经在网上搜了几个小时了，我只是想不出来。正如你所看到的，我对javascript很新。我希望你们能抽出一些时间来帮助我。感谢。

<!DOCTYPE html>

<html lang='en'>

<head>
<title></title>
<meta charset='utf-8'>
<link rel="stylesheet" href="buttonClicker" type="text/css" />
</head>

<body>
<script type="text/javascript">
    var clicks = 0;
    function oneClick(){
        var clicks += 1;
    }
    document.write(clicks);
</script>
<br>
<input type="button" value="Click Me!" onclick="oneClick()" />
</body>
</head>

Answer 1

从您的第var行中删除var clicks += 1。 var仅在初始化变量时使用，您已在oneClick函数之外执行此操作。

Answer 2

@ElliotBonneville是正确的，但我会解释一些关于为什么有效的更多信息。使用var使得包含函数的范围有限，或者如果它不在函数中，则使用窗口。这意味着如果在函数内部使用var，则无法在该函数之外访问该变量。 E.g：

function makeScopedVar(){
    var scopedVar='hi';
}
makeScopedVar();
console.log(scopedVar);//will log "undefined" or "null" to the console, not "hi"

当不使用var声明变量时，它被全局声明，例如：

makeGlobalVar(){
    globalVar='hi';
}
makeGlobalVar();
console.log(globalVar);//will log "hi" to the console

此外，函数中的变量（如果作用域）与函数变量之外的变量完全不同。让我解释一下：

var trickyVar='hi global';//this uses var, but it isn't in a function so the variable is still created globally
function makeScopedVar(){
    var trickyVar='hi scoped';
}
makeScopedVar();
console.log(trickyVar);//will log "hi global" to the console

如您所见，该函数由于var而创建了一个范围变量，另一个是全局的，因此它生成一个完全不同的变量。在您的代码中，使用var clicks+=1的函数内部的代码生成一个作用域点击变量并递增它，但这与其他变量分开，因此它不能按预期工作。以下是代码的外观：

<script type="text/javascript">
var clicks = 0;
function oneClick(){
    clicks += 1;
    alert(clicks);
}
</script>

我删除了document.write并替换为alert它因为... document.write很多原因很糟糕。在此示例中，它将删除整个页面。我也将它放在INSIDE函数中，否则，它将在页面加载时运行，这就是全部。这是一个工作的codepen（内联处理程序在jsfiddle中不起作用）：http://codepen.io/anon/pen/ziltn

另一个答案不适合你的原因是因为console.log / alert不在函数范围内。

修改

如果您希望页面中的元素而不是警告框中的点击次数，则只需向页面添加元素并修改其内容即可。在页面中包含此HTML：

<div id="clickoutput">0</div>

并将alert(clicks)替换为document.getElementById('clickoutput').textContent=clicks

Answer 3

您的代码中存在两个问题：首先，在oneClick（）函数中重新定义click变量。由于click变量是在您的第一个脚本行中定义的，因此您无需在函数内再次定义它，您只需使用它：clicks + = 1.

第二个问题是document.write（）会将你传递给它的内容替换为html文档的内容，这不是你想要的。您需要定义一个保存您的值的html元素，然后将数字写入其中：

在你的HTML中：

<div id='clicks'>0</div>

并在您的脚本中：

document.getElementById('clicks').innerHtml = clicks

编辑：感谢Markasoftware

我希望在我的html文档中更改一个数字，但是使用javascript

3 个答案: