現在のテキストに基づくリアルタイムのJavaScriptの計算

Question

私はJavaScriptにはとても新しいので、簡単なリアルタイム計算を作成しようとしています。

私は0で始まり、ボタンを使用して加算または減算することができ、その結果が私の 'demo' divに表示されるという考えです。

私はvar y = document.getElementById（ "demo"）でその結果を '選択'しようとしています。しかし、明らかにそれは

が、私はこれは非常に非効率的なコードであるかもしれない知っている...仕事をdoesntのが、私はまだHTML

<div>Score: <div id="demo">0</div> total points</div> 

<button onclick="first()" href="#number-1">this adds 10</button> 

<button onclick="second()" href="#number-1">this adds 7</button> 

<button onclick="third()" href="#number-2">this subtracts 5</button> 

<button onclick="reset()" href="#number-2">reset</button> 

Javascriptを

function first() { 
    var y = 0; 
    var z = 10; 
    var x = +y + +z; 
    document.getElementById("demo").innerHTML = x; 
} 

function second() { 
    var y = document.getElementById("demo").value; 
    var z = 7; 
    var x = +y + +z; 
    document.getElementById("demo").innerHTML = x; 
} 

function third() { 
    var y = document.getElementById("demo").value; 
    var z = -5; 
    var x = +y + +z; 
    document.getElementById("demo").innerHTML = x; 
} 

function reset() { 
    var y = 0; 
    var z = -0; 
    var x = +y + +z; 
    document.getElementById("demo").innerHTML = x; 
} 

を

を学んでいますhttp://codepen.io/anon/pen/BLxoZy

Answer 1

それは理由document.getElementById("demo").valueで働いていない、あなたは次のように値を収集するためのdocument.getElementById("demo").innerHTMLを使用する必要がある -

function first() { 
    var y = 0; 
    var z = 10; 
    var x = +y + +z; 
    document.getElementById("demo").innerHTML = x; 
} 

function second() { 
    var y = document.getElementById("demo").innerHTML; 
    var z = 7; 
    var x = +y + +z; 
    document.getElementById("demo").innerHTML = x; 
} 

function third() { 
    var y = document.getElementById("demo").innerHTML; 
    var z = -5; 
    var x = +y + +z; 
    document.getElementById("demo").innerHTML = x; 
} 

function reset() { 
    var y = 0; 
    var z = -0; 
    var x = +y + +z; 
    document.getElementById("demo").innerHTML = x; 
} 

document.getElementById("demo").valueを使用して、あなたはdocument.getElementById("demo").innerHTMLを使用して、フォームの入力値&を収集することができ、あなたのHTMLタグからデータを収集することができます。