Menu
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>
525
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!
149
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
