提问人：Rory L. 提问时间：8/1/2017 最后编辑：Maxim KuzminRory L. 更新时间：8/1/2017 访问量：487
js 按钮不更新 innerhtml
js button not updating innerhtml
问：
我已经在这里看过很多问题，但我还没有找到类似的问题。我正在尝试给一个按钮一个更新变量的函数（特别是一个数字，即 - 按钮按下>>变成 ）并将其写入 .它会在警报中更新，但不会更新 .01innerHTMLdivinnerHTML
var example = 0;
var exampleDiv = document.getElementById('exampleDiv');
function buyExample() {
example += 1;
}
exampleDiv.innerHTML = 'You have ' + example + ' examples.';
网页上显示的数字为 0。
答：
1赞
Maxim Kuzmin
8/1/2017
#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>
0赞
Michael Conard
8/1/2017
#2
从你给出的上下文来看，你的陈述：
exampleDiv.innerHTML = 'You have ' + example + ' examples.';
仅在 Javascript 初始化时运行一次，此时示例变量仍设置为 0。如果您希望 div 在每次使用按钮时都更新，则还需要将其包含在 buyExample（） 方法中。
function buyExample() {
example += 1;
exampleDiv.innerHTML = 'You have ' + example + ' examples.';
}
0赞
user94559
8/1/2017
#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>
0赞
Will
8/1/2017
#4
您必须将更新 DOM 的语句移动到每次单击按钮时运行的函数中。按照您的方式，当页面加载时设置一次，并且每次单击时都会更新变量，但您永远不会再次将 的值设置为页面。innerHTMLexampleexample
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>
评论
exampleDiv.innerHTML = ...buyExamplebuyExampleexampleDiv.innerHTML = 'You have ' + example + ' examples.';进入 buyExample（） 函数。