Add 3 html text box and put sum in third using javascript function and onclick button

Question

I dont know if my question is clear but i want to add these 3 value (the value is changed by 4 different radio button)

    <input id="somme1" name ="txtRep1" type="text" value="" />
    <input id="somme2" name ="txtRep2" type="text" value="" />
    <input id="somme3" name ="txtRep3" type="text" value="" />

And i want to take the sum of these three and throw it in sommeTotal when i press the button btnSomme

   <fieldset id="section3">
            <input type="button" name="btnSomme" id="btn1" value="Somme" onclick="sommeTotal.value = nb4.value" />
            <input id="sommeTtl" name ="sommeTotal" type="text" value="" />
        </fieldset>

here is the javascript function

    function fctSomme();
 {
    var nb1 = document.getElementById("somme1").value;
    var nb2 = document.getElementById("somme2").value;      
    var nb3 = document.getElementById("somme3").value;  
    var nb4 = document.getElementById("sommeTtl").value;    
 nb4 = nb1 + nb2 + nb3
 document.getElementById("sommeTtl").value = nb4;
}

here is the full code for interrested

            <section>
        <h2>5.3</h2>
    <form name="frm3">
        <fieldset id="section1">
            <input name ="btnrad1" type ="radio" value="10" onclick="txtRep1.value = this.value" />
            <input name ="btnrad1" type ="radio" value="15" onclick="txtRep1.value = this.value" />
            <input name ="btnrad1" type ="radio" value="20" onclick="txtRep1.value = this.value" />
            <input name ="btnrad1" type ="radio" value="25" onclick="txtRep1.value = this.value" />
            <input name ="btnrad1" type ="radio" value="30" onclick="txtRep1.value = this.value" />
            <input id="somme1" name ="txtRep1" type="text" value="" />
        </fieldset>
        <fieldset id="section2">
            <input name ="btnrad2" type ="radio" value="10" onclick="txtRep2.value = this.value" />
            <input name ="btnrad2" type ="radio" value="15" onclick="txtRep2.value = this.value" />
            <input name ="btnrad2" type ="radio" value="20" onclick="txtRep2.value = this.value" />
            <input name ="btnrad2" type ="radio" value="25" onclick="txtRep2.value = this.value" />
            <input name ="btnrad2" type ="radio" value="30" onclick="txtRep2.value = this.value" />
            <input id="somme2" name ="txtRep2" type="text" value="" />
        </fieldset>
        <fieldset id="section3">
            <input name ="btnrad3" type ="radio" value="10" onclick="txtRep3.value = this.value" />
            <input name ="btnrad3" type ="radio" value="15" onclick="txtRep3.value = this.value" />
            <input name ="btnrad3" type ="radio" value="20" onclick="txtRep3.value = this.value" />
            <input name ="btnrad3" type ="radio" value="25" onclick="txtRep3.value = this.value" />
            <input name ="btnrad3" type ="radio" value="30" onclick="txtRep3.value = this.value" />
            <input id="somme3" name ="txtRep3" type="text" value="" />
        </fieldset> 
        <fieldset id="section3">
            <input type="button" name="btnSomme" id="btn1" value="Somme" onclick="sommeTotal.value = nb4.value" />
            <input id="sommeTtl" name ="sommeTotal" type="text" value="" />
        </fieldset>             
        </form>     

        </section>

PLease provide only that information which is needed. Too Bulky question dosent work out — The Hungry Dictator
– The Hungry Dictator, Commented Feb 26, 2014 at 3:28

Roberto · Accepted Answer · 2014-02-26 04:30:46Z

1

Do you want to add when the inputs are changed? On the click of a button? On a simple inspection, your nb1+nb2+nb3 will return something like "101520" as these are being treated as strings instead of integers. Try something converting them to integers using parseInt, like so:

function fctSomme(){
    var nb1 = parseInt(document.getElementById("somme1").value, 10);
    var nb2 = parseInt(document.getElementById("somme2").value, 10);      
    var nb3 = parseInt(document.getElementById("somme3").value, 10);  
    var nb4 = document.getElementById("sommeTtl").value;    
    nb4.value = nb1 + nb2 + nb3
}

And a button like: <button type="button" onclick="fctSome">Show total</button>

Full code here: http://jsfiddle.net/sbp9E/3/

edited Feb 26, 2014 at 4:30

answered Feb 26, 2014 at 3:43

Roberto

1,9441 gold badge31 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

ameulilug Over a year ago

I've thought about the parseInt and now i added it, but nothing happens when i press the button. The console tell me "Uncaught ReferenceError :fctSomme is not defined"

Roberto Over a year ago

Can't say unless you post your whole code in a jsfiddle or something of sorts. The error is that there is no global variable named "fctSomme" defined. Go ahead read about javascript variable scope, I learned a lot from this: bonsaiden.github.io/JavaScript-Garden

ameulilug Over a year ago

Now that I used your code, when i press the button all my radio button uncheck but nothing happen. Not even an error in the console

ameulilug Over a year ago

The whole code is there mate, i putted it at the end, just the function is above

Roberto Over a year ago

Is your javascript embedded in the html? Where? Head? Body? Use jsfiddle.net

|

Collectives™ on Stack Overflow

Add 3 html text box and put sum in third using javascript function and onclick button

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related