なぜ私の変数が1つ上がっていないのですか？

Question

私はちょうどコードで始めて、を実際にのシンプルなWebページボタンにしようとしています。私が本当にやりたいことは、ページに数字を表示し、ボタンをクリックすると数字が1つ上がることです。

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タグを追加し、このように数を表示するためにそれを使用することができます：あなたはそれに数を設定するspanタグと.innerTextを選択しdocument.getElementById('num')を使用

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

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

。

Answer 2

はい、UIを更新するために変数を変更するたびに、変数を印刷する必要があります。

ただし、innerText経由ではなく、HTML要素の残りの部分を上書きされないようにdocument.writeを使用してspanかdivに書き込む必要があります。

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); 
}