Javascript - 我看不到值总和的结果

Question

I have a design problem in the script that gives me the values ​​of the right column (ignoring the values ​​on the left), and the result of the sume I can not see in the green box when I click on "View Result"

 // Old script /*window.sumInputs = function() { var inputs = document.getElementsByTagName('input'), result = document.getElementById('total'), sumar = 0; for(var i=0; i<inputs.length; i++) { var ip = inputs[i]; if (ip.name && ip.name.indexOf("total") < 0) { sumar += parseInt(ip.value) || 0; } } result.value = sumar; }*/ // ======================== // New script $(document).ready(function() { var valores = $('#derecha').children(); var suma = 0; $.each(valores, function() { valor = $(this).val() || 0; suma += parseInt(valor); }); //console.log(suma); valores = document.getElementById('total'); }); 

 body p { margin: 0 20px } /*#izquierda {display:none}*/ #izquierda, #derecha { display: inline-block; vertical-align: top; width: 140px; margin: 20px 20px 20px 20px; padding: 10px; border: 1px solid #000 } #izquierda span, #derecha span, body span { font-weight: bold } #izquierda p, #derecha p { margin: 5px auto 15px; text-align: center } input { width: 80px; display: block; margin: 5px auto; padding: 2px 0; background: #f2f2f2; border: none; border: 1px solid #000; text-align: center } #cont-resultado { text-align: center; width: 120px; padding-left: 40px } #cont-resultado input { display: inline-block; margin: 0 auto 10px; background: red; color: #fff; border: none; padding: 10px 0 } #cont-resultado a { display: inline-block; text-decoration: none; color: #fff; background: green; padding: 10px 12px } #total { display: block } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="izquierda"> <p><span>DIV LEFT</span><br>display="none"</p> <input name="qty1" value="240"> <input name="qty2" value="862"> <input name="qty3" value="911"> <input name="qty4" value=""> <input name="qty5" value=""> <input name="qty6" value=""> <input name="qty7" value=""> <input name="qty8" value=""> </div> <!-- ================ --> <div id="derecha"> <p><span>DIV RIGHT</span><br>display="block"</p> <input name="qty1" value="2"> <input name="qty2" value="2"> <input name="qty3" value="2"> <input name="qty4" value=""> <input name="qty5" value=""> <input name="qty6" value=""> <input name="qty7" value=""> <input name="qty8" value=""> </div> <!-- ================ --> <div id="cont-resultado"> <input name="total" id="total"> <a href="javascript:sumInputs()">See total</a> </div> <br> <p>What I am looking for is that only the RIGHT column is sumed, ignoring the values in the left column. <br><br><span>The result of example (6) must be seen in the red box...</span></p> 

What am I doing wrong...?

Thanks in advance!

$(document).ready(function(){
var valores = $('#derecha').children();
var suma = 0;
$.each(valores,function(){
  valor = $(this).val() || 0;
  suma += parseInt( valor );
});

//console.log(suma);
valores = document.getElementById('total');

});

Answer 1

You're not doing anything with suma , further, use a selector for the children .children('input') .

 $(document).ready(function() { function sumInputs(e) { e.preventDefault(); var valores = $('#derecha').children('input'); var suma = 0; $.each(valores, function() { valor = $(this).val(); suma += Number(valor); }); valores = document.getElementById('total'); $(valores).val(suma); } $('#sumup').on('click', sumInputs); }); 

 body p { margin: 0 20px}/*#izquierda {display:none}*/#izquierda,#derecha { display: inline-block; vertical-align: top; width: 140px; margin: 20px 20px 20px 20px; padding: 10px; border: 1px solid #000}#izquierda span,#derecha span,body span { font-weight: bold}#izquierda p,#derecha p { margin: 5px auto 15px; text-align: center}input { width: 80px; display: block; margin: 5px auto; padding: 2px 0; background: #f2f2f2; border: none; border: 1px solid #000; text-align: center}#cont-resultado { text-align: center; width: 120px; padding-left: 40px}#cont-resultado input { display: inline-block; margin: 0 auto 10px; background: red; color: #fff; border: none; padding: 10px 0}#cont-resultado a { display: inline-block; text-decoration: none; color: #fff; background: green; padding: 10px 12px}#total { display: block} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="izquierda"> <p><span>DIV LEFT</span><br>display="none"</p> <input name="qty1" value="240"> <input name="qty2" value="862"> <input name="qty3" value="911"> <input name="qty4" value=""> <input name="qty5" value=""> <input name="qty6" value=""> <input name="qty7" value=""> <input name="qty8" value=""></div><!-- ================ --><div id="derecha"> <p><span>DIV RIGHT</span><br>display="block"</p> <input name="qty1" value="2"> <input name="qty2" value="2"> <input name="qty3" value="2"> <input name="qty4" value=""> <input name="qty5" value=""> <input name="qty6" value=""> <input name="qty7" value=""> <input name="qty8" value=""></div><!-- ================ --><div id="cont-resultado"> <input name="total" id="total"> <a id='sumup' href="#">See total</a></div><br><p>What I am looking for is that only the RIGHT column is sumed, ignoring the values in the left column. <br><br><span>The result of example (6) must be seen in the red box...</span></p> 

Answer 2

你需要将valores （新的）的值设置为suma ：

valores.val(suma);