input获取所相加的值显示到一个input中 多个input中的值相加求和

首先建一个input框 加入onkeyup() 事件,如果有多个input框,则 onkeyup() 名字相同,例如都叫 sumadd(this)

      <div class="col-sm-7">
           <input type="text" name="cntk" value="${cG25.cntk!}" id="cntk"
              onkeyup="sumadd(this)"
              onblur="platform_verify.onblurVali(this);">
       </div>

js代码

var sumadd = function () {
var cntc = document.getElementById(“cntc”); /* 获取input中id值*/
var cntd = document.getElementById(“cntd”);
var cnte = document.getElementById(“cnte”);
var personcnt = document.getElementById(“personcnt”);

if (cntc.value == ‘’) { // if判断
var a1 = 0;
} else {
var a1 = parseInt(cntc.value);
}
if (cntd.value == ‘’) {
var a2 = 0;
} else {
var a2 = parseInt(cntd.value);
}
if (cnte.value == ‘’) {
var a3 = 0;
} else {
var a3 = parseInt(cnte.value);
}
}
personcnt.value = a1 + a2 + a3 + a4 + a5 + a6 + a7 + a8 + a9;

其中 personcnt是获取和的input的id
完成后的效果,会根据输入不同的值实时更新 (如果在不同的页面展示,可以隐藏求和的input,在后台传值)
在这里插入图片描述

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用 JavaScript 来实现多个 input 框的求和。首先需要给每个 input 框都添加一个事件监听器,当输入框的发生改变时,就可以计算它们的总和了。以下是一个示例代码: ```html <input type="text" id="input1"> <input type="text" id="input2"> <input type="text" id="input3"> <p>总和:<span id="sum"></span></p> <script> // 获取 input 元素 const input1 = document.getElementById('input1'); const input2 = document.getElementById('input2'); const input3 = document.getElementById('input3'); const sum = document.getElementById('sum'); // 添加事件监听器 input1.addEventListener('input', updateSum); input2.addEventListener('input', updateSum); input3.addEventListener('input', updateSum); // 计算总和 function updateSum() { const val1 = input1.value ? parseInt(input1.value) : 0; const val2 = input2.value ? parseInt(input2.value) : 0; const val3 = input3.value ? parseInt(input3.value) : 0; const total = val1 + val2 + val3; sum.innerHTML = total; } </script> ``` 在上面的代码,我们首先使用 `document.getElementById()` 方法获取每个 input 元素和总和元素。然后,我们添加了一个名为 `updateSum` 的函数作为输入框的事件监听器。该函数将每个输入框的相加,并将结果显示在总和元素。注意,在计算总和之前,我们使用 `parseInt()` 方法将输入框的转换为数字。同时,我们使用三元运算符来避免空导致的错误。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值