ページを初めて読み込むときにJavascriptコードを実行するにはどうすればよいですか？

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を呼び出すように設定しました。また、HTMLではなくJS内で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/