为了账号安全,请及时绑定邮箱和手机立即绑定

如何在javascript中自动求和多个输入框内循环

如何在javascript中自动求和多个输入框内循环

PHP
海绵宝宝撒 2022-01-24 09:28:26
我想计算我的输入框内部循环,如果完成,请帮我解决这个问题<?php$jumlah_form = 3;    for($i=1; $i<=$jumlah_form; $i++){    ?>    <input type="text" id="txt1"  onkeyup="sum1();" /></br>    <?php    }    ?>    <input type="text" id="txt2" value= "0" /></br>   <script>  function sum1() {      var txtFirstNumberValue = document.getElementById('txt1').value;      var txtSecondNumberValue = document.getElementById('txt2').value;      var result = parseInt(txtFirstNumberValue) + parseInt(txtFirstNumberValue) ;      if (!isNaN(result)) {         document.getElementById('txt2').value = result;      }   }  </script>通过循环创建三个输入框,我想计算三个输入框,并在用户输入数字时将结果解析为结果框
查看完整描述

2 回答

?
天涯尽头无女友

TA贡献1831条经验 获得超9个赞

我想您是在问如何编写 JavaScript 以便将所有输入框的总数加起来,无论 PHP 创建了多少?


如果是这样,那么一个好方法是为所有文本框提供相同的类。然后,JavaScript 可以选择具有该类的所有框,遍历它们并获得总值。


这是一个使用 3 个文本框的工作示例(就好像 PHP 以这种方式生成它们一样):


var textboxes = document.querySelectorAll(".sum");

textboxes.forEach(function(box) {

  box.addEventListener("keyup", sumAll);

});


function sumAll() {

  var total = 0;

  textboxes.forEach(function(box) {

    var val;

    if (box.value == "") val = 0;

    else val = parseInt(box.value);

    total += val;

  });

  document.getElementById("total").innerText = total;

}

<input type="number" id="txt1" class="sum" value="0" /><br/>

<input type="number" id="txt2" class="sum" value="0" /><br/>

<input type="number" id="txt3" class="sum" value="0" /><br/>

<br/><br/> Total: <span id="total"></span>


查看完整回答
反对 回复 2022-01-24
?
largeQ

TA贡献2039条经验 获得超8个赞

用 php 生成 html:


$count = 5;


for($i=1;$i <= $count;$i++) {


  echo "<input type='number' id='"."txt".i."' /></br>"


}

从输入计算总和:


<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>Hello World</title>

</head>

<body>

  <form onsubmit="submitForm(this); return false;" >

    <input type="number" id='text1'>

    <input type="number" id='text2'>

    <input type="number" id='text3'>

    <input type="number" id='text4'>

    <input type="number" id='text5'>

    <button type="submit" >Calculate</button>

  </form>

  <div>

    <p>Result:</p>

    <p id='result'></p>

  </div>

  

  <script>

    function submitForm(form) {

        let toReturn = 0;

        const inputs = form.getElementsByTagName("input");

      for(let x = 0; x < inputs.length; x++ ) {

        toReturn += parseInt(inputs[x].value ? inputs[x].value : 0);

      }

      

      document.getElementById('result').innerHTML = toReturn;

      return false;

    }

  </script>

</body>

</html>


查看完整回答
反对 回复 2022-01-24
  • 2 回答
  • 0 关注
  • 236 浏览

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号