コードをvar名で置き換えるとスクリプトが機能しなくなる

Question

私は初心者で、ちょうどJavaScriptを学び始めました。私はほぼ同じスクリプトを2つ持っています。最初のものはうまくいきましたが、 "document.getElementById（" counter "）。value"をvar name "getValue"に置き換えて、スクリプトがなぜ機能しなくなったのか不思議でした。どちらも同じコードを含んでいますよね？

Counter: <input type="text" id="counter" value="0"> 

<button onclick="myFunction()">Increase</button> 

<script> 
function myFunction() { 
    var getValue = document.getElementById("counter").value; 
    ++document.getElementById("counter").value; 
} 
</script> 

<script> 
function myFunction() { 
    var getValue = document.getElementById("counter").value; 
    ++getValue; 
} 
</script> 

Answer 1

++に、そのインクリメント値に戻って割り当てます。 getValueを宣言すると、inputにあった値のコピーが作成されます。何らかの形で.valueプロパティに割り当てる必要があります。

// given the value is "0" 
function myFunction() { 
    var getValue = document.getElementById("counter").value; // .value: "0"; getValue: "0" 
    ++getValue; // .value "0"; getValue: 1 
} 

これはコンソールの各ステップに簡単に記録できます。

最初のスクリプトでは、getValueは使用されていません。

Answer 2

getValueは変数であり、値を要素に戻す必要があります。スニペットを参照してください。

function myFunction() { 
 
    var getValue = document.getElementById("counter").value; 
 
    ++getValue; 
 
    document.getElementById('counter').value=getValue; 
 
}

<input type="text" id="counter" value=0 /> 
 
<button onclick="myFunction();">+</button>