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

I want a number to change in my html document, but by using javascript

本文关键字：数字 一个 javascript 文档 html 我的 我希望      更新时间：2023-09-26

我需要有关我的网站的帮助，或者您想怎么称呼它。这个想法是我有一个数字，如果点击一个按钮，我的数字就会加 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>

从行var clicks += 1中删除var。 var仅在初始化变量时使用，您已经在 oneClick 函数外部执行了该操作。

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

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 并替换为警报它，因为......document.write不好的原因有很多。在此示例中，它将删除整个页面。我还将其放在函数中，因为否则，它将在页面加载时运行，仅此而已。这是一个有效的代码笔（内联处理程序在 jsfiddle 中不起作用）： http://codepen.io/anon/pen/ziltn

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

编辑：

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

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

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

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

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

在您的 html 中：

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

在您的脚本中：

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

编辑：感谢马尔卡软件

相关文章：