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

Я очень новичок в 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


javascript math addition
person Nicolás Muiño    schedule 11.10.2016    source источник
comment
Элементы Div не содержат значения document.getElementById("demo").value. Вы хотите получить innerHTML, поэтому измените все var y на var y = document.getElementById("demo").innerHTML;, и все будет работать нормально.   -  person NewToJS    schedule 11.10.2016
comment
Это не вызовет проблем, но вы немного переборщили с унарным оператором плюс, используя его для значений, которые, как вы знаете, уже будут числами. (Он вам нужен только для преобразования строковых значений, поступающих из элемента DOM, после того, как вы исправите эту часть.)   -  person nnnnnn    schedule 11.10.2016

Ответы (1)


arrow_upward
0
arrow_downward

Это не работает из-за 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-тега.

person Jobayer    schedule 11.10.2016
comment
Но я также обновил код, чтобы сделать его проще :) - person Jobayer; 11.10.2016
comment
JSfiddle подойдет. Во всяком случае, этот вопрос следует пометить как дубликат и закрыть. ИЛИ, по крайней мере, объясните, почему использование .value не работает и почему ОП должен использовать .innerHTML, тогда это будет правильный ответ. - person NewToJS; 11.10.2016