javascript - 使用 javascript 在 html 中自动求和文本框

Question

我需要你的帮助。

我有两个带有随机数字的文本框和 1 个用于显示总数的文本框。

如果我单击或填充 Qty1 或 Qty2 文本框，总计文本框将运行 sum 函数。

我想将其更改为:如果我重新加载页面，Total 文本框将自动对 Qty1 和 Qty2 文本框求和并显示值。

function findTotal(){
		var arr = document.getElementsByName('qty');
		var tot=0;
		for(var i=0;i<arr.length;i++){
			if(parseInt(arr[i].value))
				tot += parseInt(arr[i].value);
		}
		document.getElementById('total').value = tot;
	}

Qty1 : <input onblur="findTotal()" type="text" name="qty" id="qty1" value="<?php $digits = 3; echo rand(pow(10, $digits-1), pow(10, $digits)-1);?>"/><br>
Qty2 : <input onblur="findTotal()" type="text" name="qty" id="qty2" value="<?php $digits = 3; echo rand(pow(10, $digits-1), pow(10, $digits)-1);?>"/><br>
<br><br>
Total : <input type="text" name="total" id="total"/>

先谢谢了。 。 .

Answer 1

您正在 onblur 事件上触发该函数，因此只有当您将焦点移出 input 元素时，该函数才会触发。您应该在页面加载时调用该函数，检查代码片段。

您还可以在页面加载后通过 keyup 事件来实现:

function findTotal(){
		var arr = document.getElementsByName('qty');
		var tot=0;
		for(var i=0;i<arr.length;i++){
			if(parseInt(arr[i].value))
				tot += parseInt(arr[i].value);
		}
		document.getElementById('total').value = tot;
	};
   document.addEventListener("DOMContentLoaded", function(event) {
       findTotal();
    });

Qty1 : <input onkeyup="findTotal()" type="text" name="qty" id="qty1" value="2"/><br>
Qty2 : <input onkeyup="findTotal()" type="text" name="qty" id="qty2" value="3"/><br>
<br><br>
Total : <input type="text" name="total" id="total"/>