jsボタンはinnerhtmlを更新していません

Question

私は既にここで多数の質問を見てきましたが、私は同様の問題を見つけることができませんでした。私は、ボタンに変数（具体的には数値、すなわち、0が1となるプレス）を更新する機能を与え、innerHTMLにdivと書きます。アラートで更新されますが、innerHTMLは更新されません。

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

function buyExample() { 
    example += 1; 
} 

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

Webページに表示される数はexampleDiv.innerHTMLが一度だけ設定されているので、あなたのコードが正常に動作していない0

Answer 1

の作業コード：

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 2

です。それを関数に移動する必要があります。あなたが与えてくれたコンテキストから

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 3

、あなたの文：Javascriptが初期化時

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

は一度だけ実行され、例変数がまだその時点で0を設定します。ボタンを使用するたびにdivを更新するには、buyExample（）メソッドにも含める必要があります。上記の私のコメントに基づいて

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

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>