CODEWITHSUNDEEP
javascripthtml
Drayna Flaire
Drayna Flaire

Reputation: 1

Making a sum with 4 values and a button

I'm trying to make a sum of 4 entries in 4 text type and everything seems fine except that when I click the button, it won't set the sum. Like if I enter 1 in each text input, the text input for the sum should show 4. Thanks!

here's my Javascript code :

(function(){
var oForm = document.forms;

oForm[2].querySelector("input[type='button']").
                                        addEventListener("click",
                                            sommeValeur,
                                            false);
}) ()

function sommeValeur() {

  var aTxt = document.forms[0].tEx1;
  var total = document.forms[0].tEx2;
var txt1  = aTxt[0].value;
var txt2  = aTxt[1].value;
var txt3  = aTxt[2].value;
var txt4  = aTxt[3].value;

total = parseInt(txt1) + parseInt(txt2) + parseInt(txt3) + parseInt(txt4) ;

return true;
}

Here's my html code : 

<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/form.css" />
</head>
<body>
<section>
            <form name="frm1">
                <label> Valeur 1:
                    <input type="text" name="tEx1" />
                </label>
                <label> Valeur 2:
                    <input type="text" name="tEx1" />
                </label>
                <label> Valeur 3:
                    <input type="text" name="tEx1" />
                </label>
                <label> Valeur 4:
                    <input type="text" name="tEx1" />
                </label>
            </form>
        </section>

        <section>
                <form name="frm2">
                <label> Somme:
                    <input type="text" name="tEx2" />
                </label>
                </form>
        </section>

        <section>
                <form name="frm3">
                <label>
                    <input type="button" 
                    value="bouton" 
                    name="btn1" /></br>
                </label>
                </form>
        </section>
</body>
<script src="js/exercise4.js"></script> 
</html>

Upvotes: 0

Views: 69

Answers (2)

Borys Serebrov
Borys Serebrov

Reputation: 16182

It looks like your input for total is in the second form, so you need form[1] and also you need to use total.value to set the value:

var total = document.forms[1].tEx2;
...
total.value = parseInt(txt1) + parseInt(txt2) + parseInt(txt3) + parseInt(txt4) ;

Live example:

(function(){
var oForm = document.forms;

oForm[2].querySelector("input[type='button']").
                                        addEventListener("click",
                                            sommeValeur,
                                            false);
}) ()

function sommeValeur() {

  var aTxt = document.forms[0].tEx1;
  var total = document.forms[1].tEx2;
  var txt1  = aTxt[0].value;
  var txt2  = aTxt[1].value;
  var txt3  = aTxt[2].value;
  var txt4  = aTxt[3].value;

  total.value = parseInt(txt1) + parseInt(txt2) + parseInt(txt3) + parseInt(txt4) ;

  return true;
}
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/form.css" />
</head>
<body>
<section>
            <form name="frm1">
                <label> Valeur 1:
                    <input type="text" name="tEx1" />
                </label>
                <label> Valeur 2:
                    <input type="text" name="tEx1" />
                </label>
                <label> Valeur 3:
                    <input type="text" name="tEx1" />
                </label>
                <label> Valeur 4:
                    <input type="text" name="tEx1" />
                </label>
            </form>
        </section>

        <section>
                <form name="frm2">
                <label> Somme:
                    <input type="text" name="tEx2" />
                </label>
                </form>
        </section>

        <section>
                <form name="frm3">
                <label>
                    <input type="button" 
                    value="bouton" 
                    name="btn1" /></br>
                </label>
                </form>
        </section>
</body>
</html>

Upvotes: 3

Slava Shpitalny
Slava Shpitalny

Reputation: 4195

You are changing the total instance and not the total.value. In the line total = ...+...+..+...; you are basically replacing the label with the sum. You should set the label text instead: total.value = ...+..+...+...;

Upvotes: 0

Related Questions