Question

我已经查看了很多问题，但我找不到类似的问题。我试图给一个按钮一个更新变量的函数（特别是一个数字，即 - 按下按钮＆gt;＆gt; 0变为1）并将其写入一个innerHTML div。它会在警报中更新，但不会更新innerHTML。

var example = 0;
var exampleDiv = document.getElementById('exampleDiv');

function buyExample() {
  example += 1;
}

exampleDiv.innerHTML = 'You have ' + example + ' examples.';

网页上显示的数字为0。

Answer 1

由于exampleDiv.innerHTML只设置了一次，因此您的代码无法正常运行。你必须把它移到函数中。

var example = 0;
var exampleDiv = document.getElementById('exampleDiv');
render();

function buyExample() {
  example += 1;
  render();
}

function render() {
  exampleDiv.innerHTML = 'You have ' + example + ' examples.';
}

<button id="button" onclick="buyExample()">Button</button>

<div id="exampleDiv"></div>

Answer 2

从您提供的上下文中，您的陈述：

exampleDiv.innerHTML = 'You have ' + example + ' examples.';

只有在Javascript初始化时才会运行一次，此时示例变量仍然设置为0.如果您希望每次使用按钮时更新div，则需要将其包括在内在 buyExample（）方法中也是如此。

function buyExample() {
    example += 1;
    exampleDiv.innerHTML = 'You have ' + example + ' examples.';
}

Answer 3

基于上述评论的工作代码：

var example = 0;
var exampleDiv = document.getElementById('exampleDiv');

function buyExample() {
  example += 1;
  exampleDiv.innerHTML = 'You have ' + example + ' example' + (example !== 1 ? 's' : '') + '.';
}

document.getElementById("incrementButton").onclick = buyExample;

<button id="incrementButton">Click me</button>

<div id="exampleDiv">You have 0 examples.</div>

Answer 4

您必须将更新DOM的语句移动到每次单击按钮时运行的函数。您拥有它的方式，innerHTML在页面加载时设置一次，变量example在每次点击时都会更新，但您再也不会将example的值设置到页面。

var example = 0;
var exampleDiv = document.getElementById('exampleDiv');

function buyExample() {
  example += 1;
  exampleDiv.innerHTML = 'You have ' + example + ' examples.';
}

<div id="exampleDiv">You have 0 examples.</div>
<button onclick="buyExample()">buy</button>

js按钮不更新innerhtml

4 个答案: