使用javascript在HTML中具有值的AUTO SUM textboxt

时间:2018-08-08 03:23:11

标签: javascript html sum

我需要你的帮助。

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

如果我单击或填充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"/>

感谢。 。

3 个答案:

答案 0 :(得分:1)

您将在IndexError Traceback (most recent call last) <ipython-input-22-8f22a9c1d269> in <module>() 114 115 classifier = SVM() --> 116 classifier.train(fitdata = trainingdata[1:,8]) 117 classifier.visualize() 118 <ipython-input-22-8f22a9c1d269> in train(self, fitdata) 32 33 for yi in self.fitdata: ---> 34 for featureset in self.fitdata[yi]: 35 for feature in featureset: 36 alldata.append(feature) IndexError: only integers, slices (`:`), ellipsis (`...`), numpy.newaxis (`None`) and integer or boolean arrays are valid indices ​ 事件上触发该函数,因此只有将焦点移至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();
    });

答案 1 :(得分:0)

您也可以使用jQuery尝试一下,它看起来会更加优雅:)

var qty1 = $('input[name="qty1"]');
var qty2 = $('input[name="qty2"]');
var total = $('input[name="total"]');

$(document).ready(function() {
	$(qty1).val(Math.floor((Math.random() * 100) + 1));
	$(qty2).val(Math.floor((Math.random() * 100) + 1));
  
	$(total).val(Number($(qty1).val()) + Number($(qty2).val()));
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="container mt-5">
  <div class="row">
    <div class="col-6 mx-auto">
      <form id="calcForm" class="border p-4">
        
        <div class="form-group">
          <label for="qty1">Quantity 1</label>
          <input name="qty1" type="number" class="form-control">
        </div>
        
        <div class="form-group">
          <label for="qty2">Quantity 2</label>
          <input name="qty2" type="number" class="form-control">
        </div>
        
        <hr class="py-4">
        
        <div class="form-group">
          <label for="total">Total</label>
          <input name="total" type="number" class="form-control">
        </div>
        
      </form>
    </div>
  </div>
</div>

答案 2 :(得分:0)

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"/>