基于当前文本的实时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标签中收集数据。