javascript - 如何让值(value)体现出来？

Question

我正在尝试制作一个简单的表格来计算我客户的服务。我想创建一个功能来添加服务的值并立即显示它们，而无需单击按钮。我不知道我错在哪里。

<p>In total: <span id="number"></span></p>
<script>


  var kilometry = document.getElementById("kilom").value;
  var DoSto = document.getElementById("myRange1").value;
  var OdSto = document.getElementById("myRange2").value;
  var z = (+kilometry*2.5) + (+DoSto*20) + (+OdSto*80);
  var x = document.getElementById("number");
  x.innerHTML = z.value;

  z.oninput = function() {
    x.innerHTML = this.value;
  }




</script>

你能解释一下为什么它不起作用吗？ smh

Answer 1

您的脚本将立即运行且仅运行一次。您需要引入event每次更改输入值时都会发生这种情况。

<p>In total: <span id="number"></span></p>
<input id="kilom" onchange=calculateTotal()>
<input id="myRange1" onchange=calculateTotal()>
<input id="myRange2" onchange=calculateTotal()>
<script>
  function calculateTotal() {
    var kilometry = document.getElementById("kilom").value;
    var DoSto = document.getElementById("myRange1").value;
    var OdSto = document.getElementById("myRange2").value;
    var z = (+kilometry*2.5) + (+DoSto*20) + (+OdSto*80);
    var x = document.getElementById("number");
    x.innerHTML = z;
  }
</script>

function calculateTotal() {
  var kilometry = document.getElementById("kilom").value;
  var DoSto = document.getElementById("myRange1").value;
  var OdSto = document.getElementById("myRange2").value;
  var z = (+kilometry*2.5) + (+DoSto*20) + (+OdSto*80);
  var x = document.getElementById("number");
  x.innerHTML = z;
}

<p>In total: <span id="number"></span></p>
<input id="kilom" onchange=calculateTotal()>
<input id="myRange1" onchange=calculateTotal()>
<input id="myRange2" onchange=calculateTotal()>