Расчет javascript в реальном времени на основе текущего текста

Question

Я очень новичок в javascript, и я пытаюсь создать простой расчет в реальном времени.

Идея состоит в том, что я начинаю с 0 и может использовать любую кнопку для добавления или вычитания, и результат будет отображаться в моем «демо» div.

Я пытаюсь «выбрать» этот результат с помощью var y = document.getElementById («demo»). Value; но очевидно, что оно не работает ...

Я знаю, что это может быть очень неэффективный код, но я все еще учусь

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 тега.