Question

我刚开始使用代码，而我正在尝试创建一个真正简单的网页按钮。我真正想做的就是让页面显示一个数字，然后当你点击一个按钮时，这个数字就会增加一个。

我正在尝试通过使用JavaScript并将变量设置为1来执行此操作，然后使用一个函数来增加按下按钮时运行的变量。从逻辑上讲，我认为我所做的事情应该有效，但事实并非如此，所以我肯定错过了一些东西。

代码如下：HTML -

<script>
document.write(demo)
</script>
<button type="button" onclick="myFunction()">Increase Number</button>

和JavaScript -

var demo = 1;
function myFunction() {
demo++;
}

我需要在函数中添加一些东西来刷新变量吗？目前，页面只是按下按钮旁边的数字1加载，单击时没有任何反应。

Answer 1

这个数字确实上升了，但你已经按时间增量打印了它。您可以在HTML中添加span标记，并使用它来显示数字，如下所示：

var demo = 1;
function myFunction() {
    demo++;
    document.getElementById('num').innerText = demo;
}

<span id="num">1</span>
<button type="button" onclick="myFunction()">Increase Number</button>

您使用document.getElementById('num')选择span代码，使用.innerText设置代码。

Answer 2

是的，每次更改变量时都需要打印变量才能更新UI。

但是，您应该将其写入span或div到innerText，而不是使用document.write来避免覆盖其他HTML元素。

var demo = 1;

document.getElementById("demo").innerText = demo;

function myFunction() {
  demo++;
  document.getElementById("demo").innerText = demo;
}

<button type="button" onclick="myFunction()">Increase Number</button>
<span id="demo"></span>

Answer 3

您需要确保在文档递增后将变量写入文档。

var demo = 1;
function myFunction() {
  demo++;
  document.write(demo);
}

为什么我的变量不是一个一个？

3 个答案: