将jQuery值传递给html，然后用onclick计算总计

本文介绍了将jQuery值传递给html，然后用onclick计算总计的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我试图将JQuery值传递给隐藏文本框（稍后以表单的形式发送）以及div前面显示的帽子t $ / b $ b

。我也想要将这些项目的价值传递给他们。我已经Frankensteined这一点代码传递的价值，输入框和divs，它也符合他们onclick。我只是努力得到总和显示在#total_div。任何人都可以指出我正确的方向吗？

< script src =ajax.googleapis/ajax/libs/jquery/1.10.2/ jquery.min.jstype =text / javascript>< / script> < script> $（document）.ready（function（）{ $（'＃my_div'）。click（function（）{ $（'＃my_value_1'）。val（100 ）; $（'＃my_value_1_div'）。html（100）; $（'＃my_div'）。click（addNumbers（'total'））; }）; }）; $（document）.ready（function（）{ $（'＃my_div_2'）。click（function（）{ $（'＃my_value_2'）。val （200）; $（'＃my_value_2_div'）。html（200）; $（'＃my_div_2'）。click（addNumbers（'total'））; }）; }）; 函数addNumbers（） { var val1 = parseInt（document.getElementById（my_value_1）。value）; var val2 = parseInt（document.getElementById（my_value_2）.value）; var ansD = document.getElementById（total）; ansD.value = val1 + val2; } < / script> < h2>我漂亮的前端< / h2> < div id =my_div>添加此值1< / div> < div id =my_div_2>添加此值2< / div> VALUE 1：< div id =my_value_1_div> VALUE 1 GOES HERE< / div> VALUE 2：< div id =my_value_2_div> VALUE 2 GOES HERE< / div> TOTAL：< div id =total_div> SUM必须在这里< / div> < h2>我的隐藏表格< / h2> 值1：< input type =textid =my_value_1name =my_value_1value =0/> 值2：< input type =textid =my_value_2name =my_value_2value =0/> < input type =buttonname =Sumbitvalue =Click hereonclick =javascript：addNumbers（）/> 总计：< input type =textid =totalname =totalvalue =/>

编辑

好的，谢谢建议我得到了上述工作，但现在我需要清除金额。这是我所做的，它几乎在那里我认为，但我得到了不正确的总和。

$（'＃清单'）。click（function（）{ $（'＃my_value_1'）。val（'0'）; $（'＃my_value_1_div'）。html（0）; $（'＃clear'）。click（minusNumbers（'total'））; }）; 函数minusNumbers（） { var minval1 = parseInt（document.getElementById（my_value_1）。 var minval2 = parseInt（document.getElementById（total）。value）; var minansD = document.getElementById（total）; minansD.value = minval2 - minval1; $（'＃total_div'）。text（minansD.value）;

解决方案

更新 #total_div addNumber 函数中的文本，

function addNumbers（） { var val1 = parseInt（document.getElementById（my_value_1）。 var val2 = parseInt（document.getElementById（my_value_2）.value）; var ansD = document.getElementById（total）; ansD.value = val1 + val2; $（'＃total_div'）。text（ansD.value）; }

Demo

I am trying to pass on JQuery values to hidden textboxes (to send as a form later) as well as divs t

hat displays on the front end. I also want to tally these items as the value is passed to them. I have Frankensteined this bit of code which passes on the value to the the input boxes and the divs and it also tallies them onclick. I am just struggling to get the sum to display in #total_div. Can anyone point me in the right direction please?

<script src="ajax.googleapis/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script> <script> $(document).ready(function(){ $('#my_div').click(function() { $('#my_value_1').val("100"); $('#my_value_1_div').html( "100" ); $('#my_div').click(addNumbers('total')); }); }); $(document).ready(function(){ $('#my_div_2').click(function() { $('#my_value_2').val("200"); $('#my_value_2_div').html( "200" ); $('#my_div_2').click(addNumbers('total')); }); }); function addNumbers() { var val1 = parseInt(document.getElementById("my_value_1").value); var val2 = parseInt(document.getElementById("my_value_2").value); var ansD = document.getElementById("total"); ansD.value = val1 + val2; } </script> <h2>My pretty front end</h2> <div id="my_div">ADD THIS VALUE 1</div> <div id="my_div_2">ADD THIS VALUE 2</div> VALUE 1: <div id="my_value_1_div">VALUE 1 GOES HERE</div> VALUE 2: <div id="my_value_2_div">VALUE 2 GOES HERE</div> TOTAL: <div id="total_div">SUM MUST GO HERE</div> <h2>My hidden Form</h2> Value 1: <input type="text" id="my_value_1" name="my_value_1" value="0"/> Value 2: <input type="text" id="my_value_2" name="my_value_2" value="0"/> <input type="button" name="Sumbit" value="Click here" onclick="javascript:addNumbers()"/> Total: <input type="text" id="total" name="total" value=""/>

EDIT

Ok so thanks to the advice I got the above working but now I need to clear the amounts. This is what I have done, it is almost there I think but I'm getting the incorrect sum.

$('#clear').click(function() { $('#my_value_1').val('0'); $('#my_value_1_div').html( "0" ); $('#clear').click(minusNumbers('total')); }); function minusNumbers() { var minval1 = parseInt(document.getElementById("my_value_1").value); var minval2 = parseInt(document.getElementById("total").value); var minansD = document.getElementById("total"); minansD.value = minval2 - minval1; $('#total_div').text(minansD.value); }

解决方案

Update #total_div text in addNumber function as,

function addNumbers() { var val1 = parseInt(document.getElementById("my_value_1").value); var val2 = parseInt(document.getElementById("my_value_2").value); var ansD = document.getElementById("total"); ansD.value = val1 + val2; $('#total_div').text(ansD.value); }

Demo