将jQuery值传递给html，然后用onclick计算总计 [英] Passing JQuery value to html and then tally the totals with onclick

问题描述

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

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

 < script src =https://ajax.googleapis.com/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="https://ajax.googleapis.com/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

这篇关于将jQuery值传递给html，然后用onclick计算总计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！