js按钮没有更新innerhtml

我已经看过很多问题已经在这里，我一直没能找到类似的问题。我试图给按钮一个更新变量的功能（具体地说是一个数字，即 - 按钮按>>0变成1），并将它写到div的innerHTML。它在警报中更新，但不会更新innerHTML。js按钮没有更新innerhtml

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

function buyExample() { 
    example += 1; 
} 

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

网页上显示的数字是0

来源

2017-07-31 Rory L.

你能提供你的HTML代码？ – wahdan

你可能想'exampleDiv.innerHTML = ...'在'buyExample'函数中，但是你还没有真正地分享足够的代码给任何人以确定。 – smarx

您必须提供整个代码才能确定，但您无法期望该示例仅在您添加了“示例”的情况下更新了Div.innerHTML。最有可能的是，您还必须在buyExample（）函数内设置exampleDiv.innerHTML。 –

工作代码：

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>

来源

2017-07-31 21:18:09 smarx

因为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>

来源

2017-07-31 21:17:06

从你给的情况下，你的发言：

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

当JavaScript的初始化，此时例子变量仍只运行一次设置为0.如果您希望div在每次使用按钮时都进行更新，那么它也需要包含在方法buyExample（）中。基于以上我的评论

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

来源

2017-07-31 21:17:30

你必须移动，更新的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>

来源

2017-07-31 21:19:11 Will

js按钮没有更新innerhtml

回答

相关问题