Script funktioniert nach dem Ersetzen von Code durch var Name

Question

Ich bin ein Neuling und habe gerade angefangen, JavaScript zu lernen. Ich habe zwei fast die gleichen Skripte. Dieser erste funktioniert einwandfrei, aber ich habe mich gefragt, warum das Skript nach dem Ersetzen von "document.getElementById (" counter "). Value" durch den Variablennamen "getValue" nicht mehr funktioniert. Beide enthalten den gleichen Code, oder?

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

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

1.

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

2.

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

Answer 1

++ dass seine Inkrementierung auf den Wert zuordnet zurück. Wenn Sie getValue deklarieren, ist das eine Kopie des Werts, der in input war. Es muss irgendwie auf die .value Eigenschaft zurückgeführt werden.

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

Sie können dies leicht bestätigen, indem Sie jeden Schritt auf der Konsole protokollieren.

Beachten Sie, dass in Ihrem ersten Skript getValue nicht einmal verwendet wird.

Answer 2

getValue ist eine Variable, und Sie müssen dem Element den Wert zurück zuweisen. Siehe das Snippet.

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>