user6074580
Reputation: 75
How to have the sum of 3 different value in one text area
I applied value to each of my radio, for each of my forms. Point is, I need to set the sum of all of them together. I thought I could simply go and set a simply function as setting the value of each text area for each form in an addition in my function so the total would be shown but it seems like it's not working. I just feel like I am 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>
Upvotes: 5
Views: 72
Answers (2)
bibek shrestha
Reputation: 448
You may want a js function to handle the event and the make updates
<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
Upvotes: 0
Ren Camp
Reputation: 440
You can solve it by adding an onclick attribute to the input button to call the function when the button is clicked:
<label>
<input type="button" value="Somme" name="btn1" onclick="sommButton()">
</label>
Also modify the name of the function from function sommeButton () { to function sommButton () {
and modify the code in getting the values:
var somme1 = ((aSomme1.value !='' )?aSomme1.value:'0');
var somme2 = ((aSomme2.value !='' )?aSomme2.value:'0');
var somme3 = ((aSomme3.value !='' )?aSomme3.value:'0');
In getting the values, I made it into a one-liner if-statement that returns 0 when there's no value in your input tag.
I hope this helps!
Upvotes: 3
Related Questions
- How do I check if an array includes a value in JavaScript?
- How can I set the default value for an HTML <select> element?
- How do I make the first letter of a string uppercase in JavaScript?
- How do I return the response from an asynchronous call?
- How to make a div 100% height of the browser window
- How do I get the current date in JavaScript?
- How do I disable the resizable property of a textarea?
- How to find the sum of an array of numbers
- How do I modify the URL without reloading the page?
- How do I copy to the clipboard in JavaScript?