All geek questions in one place

How to get the sum of 3 different values ​​in one text area

I applied a value to each of my radio stations for each of my forms. Point, I need to set the sum of all of them together. I thought I could just go and install just a function, how to set the value of each text area for each form in addition to my function, so that the total number is displayed, but it does not seem to work. I just feel like I'm missing something. Here are my codes, thanks!

Java:

(function(){ var oForm = document.forms; oForm[0].querySelector("input[type='radio']").addEventListener("click",sommButton,false); }) () function sommeButton () { var aSomme1 = document.forms[0].tEx1; var aSomme2 = document.forms[1].tEx2; var aSomme3 = document.forms[2].tEx3; var total = document.forms[3].tEx4; var somme1 = aSomme1[5].value; var somme2 = aSomme2[5].value; var somme3 = aSomme3[5].value; total.value = parseInt(somme1) + parseInt(somme2) + parseInt(somme3) ; }

Just in case, here is my html :

 <html> <head> <meta charset="UTF-8"> <title>Exercise 5</title> <link rel="stylesheet" href="css/form.css" /> </head> <body> <section> <form name="frm1"> <label> <input type="radio" value="10" name="r1" onClick="tEx1.value = this.value"/> </label> <label> <input type="radio" value="15" name="r1" onClick="tEx1.value = this.value"/> </label> <label> <input type="radio" value="20" name="r1" onClick="tEx1.value = this.value"/> </label> <label> <input type="radio" value="25" name="r1" onClick="tEx1.value = this.value"/> </label> <label> <input type="radio" <input type="radio" value="30" name="r1" onClick="tEx1.value = this.value"/> </label> <label> <input type="text" name="tEx1" /> </label> </form> </section> <section> <form name="frm2"> <label> <input type="radio" value="10" name="r2" onClick="tEx2.value = this.value"/> </label> <label> <input type="radio" value="15" name="r2" onClick="tEx2.value = this.value"/> </label> <label> <input type="radio" value="20" name="r2" onClick="tEx2.value = this.value"/> </label> <label> <input type="radio" value="25" name="r2" onClick="tEx2.value = this.value"/> </label> <label> <input type="radio" value="30" name="r2" onClick="tEx2.value = this.value"/> </label> <label> <input type="text" name="tEx2" /> </label> </form> </section> <section> <form name="frm3"> <label> <input type="radio" value="10" name="r3" onClick="tEx3.value = this.value"/> </label> <label> <input type="radio" value="15" name="r3" onClick="tEx3.value = this.value"/> </label> <label> <input type="radio" value="20" name="r3" onClick="tEx3.value = this.value"/> </label> <label> <input type="radio" value="25" name="r3" onClick="tEx3.value = this.value"/> </label> <label> <input type="radio" value="30" name="r3" onClick="tEx3.value = this.value"/> </label> <label> <input type="text" name="tEx3" /> </label> </form> </section> <section> <label> <input type="button" value="Somme" name="btn1"> </label> </section> <section> <form name="frm4"> <label> <input type="text" name="tEx4" /> </label> </form> </section> </body> <script src="js/exercise5.js"></script> </html>
+5
source share
2 answers

You can solve this problem by adding the onclick attribute to the enter button to call the function when the button is clicked:

 <label> <input type="button" value="Somme" name="btn1" onclick="sommButton()"> </label>

Also change the function name from sommeButton () { to sommButton () {

and change the code when getting the values:

 var somme1 = ((aSomme1.value !='' )?aSomme1.value:'0'); var somme2 = ((aSomme2.value !='' )?aSomme2.value:'0'); var somme3 = ((aSomme3.value !='' )?aSomme3.value:'0');

On getting the values, I turned it into a single-line if-statement that returns 0 when there is no value in your input tag.

Hope this helps!

+3
source

You may need a js function to handle the event and update make

https://jsfiddle.net/devilfox/huasn28d/

 <body> <section> <form name="frm1"> <label> <input type="radio" value="10" name="r1" onClick="onChange(tEx1,this.value)"/> </label> <label> <input type="radio" value="15" name="r1" onClick="onChange(tEx1,this.value)"/> </label> <label> <input type="radio" value="20" name="r1" onClick="onChange(tEx1,this.value)"/> </label> <label> <input type="radio" value="25" name="r1" onClick="onChange(tEx1,this.value)"/> </label> <label> <input type="radio" value="30" name="r1" onClick="onChange(tEx1,this.value)"/> </label> <label> <input class="disp" type="text" name="tEx1" /> </label> </form> </section> <section> <form name="frm2"> <label> <input type="radio" value="10" name="r2" onClick="onChange(tEx2,this.value)"/> </label> <label> <input type="radio" value="15" name="r2" onClick="onChange(tEx2,this.value)"/> </label> <label> <input type="radio" value="20" name="r2" onClick="onChange(tEx2,this.value)"/> </label> <label> <input type="radio" value="25" name="r2" onClick="onChange(tEx2,this.value)"/> </label> <label> <input type="radio" value="30" name="r2" onClick="onChange(tEx2,this.value)"/> </label> <label> <input class="disp" type="text" name="tEx2" /> </label> </form> </section> <section> <form name="frm3"> <label> <input type="radio" value="10" name="r3" onClick="onChange(tEx3,this.value)"/> </label> <label> <input type="radio" value="15" name="r3" onClick="onChange(tEx3,this.value)"/> </label> <label> <input type="radio" value="20" name="r3" onClick="onChange(tEx3,this.value)"/> </label> <label> <input type="radio" value="25" name="r3" onClick="onChange(tEx3,this.value)"/> </label> <label> <input type="radio" value="30" name="r3" onClick="onChange(tEx3,this.value)"/> </label> <label> <input class="disp" type="text" name="tEx3" /> </label> </form> </section> <section> <label> <input type="button" value="Sum" name="btn1"> </label> </section> <section> <form name="frm4"> <label> <input type="text" name="tEx4" /> </label> </form> </section> <script> function onChange(element,val){ element.value = val; $( ".disp" ).trigger("change"); }; var num = function(t){ return ((!isNaN(t))&&t!='')?Number(t):0; }; </script> </body>

and

 (function(){ $( ".disp" ).on('change',function() { var total = num($('[name="tEx1"]').val())+ num($('[name="tEx2"]').val())+ num($('[name="tEx3"]').val()); $('[name="tEx4"]').val(total); }); })()

will do it for you

0
source

Source: https://habr.com/ru/post/1245206/

More articles: