Question

我有一个JS函数来计算给定数据乘以另一个输入数据。

var item1unitp = 150;
var item2unitp = 320;

function total () {

    var x1 = document.getElementById('t1').value;
    var x1p = parseInt(x1);
    var tot1 = item1unitp * x1p;

    var x2 = document.getElementById('t2').value;
    var x2p = parseInt(x2);
    var tot2 = item2unitp * x2p;

    var tot = tot1+tot2;

    document.getElementById('tot').innerHTML = tot;
}

和我的HTML

Item 1 : <input type="text" id="t1" value="1" onkeyup="total();"/> <br/><br/>

Item 2 : <input type="text" id="t2" value="1" onkeyup="total();"/> <br/><br/>

Sub Total : <span id="tot"></span>

此代码正在运行，但在页面的开头，此范围没有显示任何内容。但我已经为每个输入添加了值1。我如何在开头得到一个初始小计???

Answer 1

我认为这就是你所期待的，请告诉我它是否错了。

Sub Total : <span id="tot" value="total()"></span>
<script>
var item1unitp = 150;
var item2unitp = 320;

function total() {

  var x1 = document.getElementById('t1').value;
  var x1p = parseInt(x1);
  var tot1 = item1unitp * x1p;
  var x2 = document.getElementById('t2').value;
  var x2p = parseInt(x2);
  var tot2 = item2unitp * x2p;
  var tot = tot1+tot2;

  document.getElementById('tot').innerHTML = tot;
  return tot;
}
total();
</script>

Answer 2

试试这个。我们设置了在页面加载时调用的函数total。在JS而不是HTML中为onkeyup设置事件处理程序也是一种很好的做法。这是为了分离网站的布局和行为，所以我也是这样做的。

HTML

Item 1 : <input type="text" id="t1" value="1" /> <br/> <br/> 
Item 2 : <input type="text" id="t2" value="1" /> <br/> <br/> 
Sub Total : <span id="tot"></span>

JS

var item1unitp = 150;
var item2unitp = 320;

t1.onkeyup = total;
t2.onkeyup = total;
window.onload = total;

function total(){

    var x1 = document.getElementById('t1').value;
    var x1p = parseInt(x1);
    var tot1 = item1unitp * x1p;

    var x2 = document.getElementById('t2').value;
    var x2p = parseInt(x2);
    var tot2 = item2unitp * x2p;

    var tot = tot1+tot2;

    document.getElementById('tot').innerHTML = tot;
}

https://jsfiddle.net/y5pgrcc4/

如何在首次加载页面时运行Javascript代码？

2 个答案: