本文介绍了查询将两个输入字段加在一起的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有以下代码.我想将两个输入字段加在一起并将其输出到页面.我可以在输入字段中输出什么是类型,但是我无法弄清楚如何将两个字段加在一起并输出.我在 jsfiddle/erick/9Dj3j/3/ >
jQuery
$(function() { var output_element = $('#output_ele'); var output_element1 = $('#output_ele1'); $('#the_input_id').keyup(function() { var their_input = $(this).val(); var firstInput = output_element.text(their_input); }); $('#the_input_id1').keyup(function() { var their_input1 = $(this).val(); var firstInput1 = output_element1.text(their_input1); }); var output_total = $('#total'); var total = firstInput + firstInput1; output_total.text(total); });HTML
<form method="post"> <input type="text" id="the_input_id"> <input type="text" id="the_input_id1"> </form> <div id="output_ele"> </div> <div id="output_ele1"> </div> <div id="total"> </div>解决方案
您发布的代码由于某些原因无法正常工作
- 在keyUp上,将新值分配给回调本地的firstInput和firstInput1
- 总值是在这些回调函数外部计算的,因此无法访问这些本地变量(值几乎可以确定为undefined)
- 总计仅在启动时计算一次,而不是每次点击一次
您需要做的是编写一个将两个值相加的函数,并从keyUp处理程序中调用它
$('#the_input_id').keyup(function() { updateTotal(); }); $('#the_input_id1').keyup(function() { updateTotal(); }); var updateTotal = function () { var input1 = parseInt($('#the_input_id').val()); var input2 = parseInt($('#the_input_id1').val()); if (isNaN(input1) || isNaN(input2)) { $('#total').text('Both inputs must be numbers'); } else { $('#total').text(input1 + input2); } };小提琴: jsfiddle/9Dj3j/56/
I have the following code. I want to add two input fields together and output it to the page. I get as far as being able to output what is type in the input field however I can't figure how to add the two fields together and output it. I have it at jsfiddle/erick/9Dj3j/3/
Jquery
$(function() { var output_element = $('#output_ele'); var output_element1 = $('#output_ele1'); $('#the_input_id').keyup(function() { var their_input = $(this).val(); var firstInput = output_element.text(their_input); }); $('#the_input_id1').keyup(function() { var their_input1 = $(this).val(); var firstInput1 = output_element1.text(their_input1); }); var output_total = $('#total'); var total = firstInput + firstInput1; output_total.text(total); });HTML
<form method="post"> <input type="text" id="the_input_id"> <input type="text" id="the_input_id1"> </form> <div id="output_ele"> </div> <div id="output_ele1"> </div> <div id="total"> </div>解决方案
The code you posted isn't working for a couple of reasons
- On keyUp you assign the new values to firstInput and firstInput1 which are local to the callback
- The total value is calculated outside these callbacks and hence doesn't have access to those locals (the values are almost certainly undefined)
- The total is only calculated once on startup instead of once per click
What you need to do is write a function that adds the two values together and call that from the keyUp handler
$('#the_input_id').keyup(function() { updateTotal(); }); $('#the_input_id1').keyup(function() { updateTotal(); }); var updateTotal = function () { var input1 = parseInt($('#the_input_id').val()); var input2 = parseInt($('#the_input_id1').val()); if (isNaN(input1) || isNaN(input2)) { $('#total').text('Both inputs must be numbers'); } else { $('#total').text(input1 + input2); } };Fiddle: jsfiddle/9Dj3j/56/
更多推荐
查询将两个输入字段加在一起
发布评论