Javascript functions that adds three inputs

Question

I am new to Javascript so sorry in advance if its because of dumb errors.

I need to add "salaire", "pension" and "autre" and show it in an input after I click a button. I am not sure if I used the right tags in my code probably more suitable ones.

  <!DOCTYPE html>
  <html>
   <head>    
    <meta charset="urf-8"/>
    <script>
  function revenue_mensuel()
    {
      var salaire = document.getelementsbyname("salaire");
  var pension = document.getelementsbyname("pension");
  var autre = document.getelementsbyname("autre");
   return {salaire+pension+autre}
   document.getElementById("revenue").value = revenue_mensuel();
   }
  </script>
   <style>

  </style>
 </head>
 <body>
  <h1 vos revenus mensuels </h1>
  <br/>
   <div>
    <form>
      salaire mensuel (avant impots):
     <input type="number and decimal/floats" name="salaire">
    </form>
    <br/>
    <form>
      pension alimentaire recus:
    <input type="number and decimal/floats" name="pension">
    </form>
    <br/>
    <form>
     autre revenue mensuels:
     <input type="number and decimal/floats" name="autre">
     </form>
     <br/>
    <form>
     total des revenue mensuel:
    <input id="revenue" type="text"/>
    <input type="button" onclick='revenue_mensuel()'/>
     </form>   
    </body>
  </html>

Gabriele Petrioli · Accepted Answer · 2015-10-28 03:03:15Z

A list of technical issues

Javascript is case-sensitive so method you want is getElementsByName and not getelementsbyname
the getElementsByName return a list of elements (so you need to specify which in the list) in your case it is the 1st one always. so you need to access it with [0]
then you need to extract the actual value of the input with .value.
you need to convert the string to a number. (adding + at the start, or using parseInt will do the trick)

In the concept

You are calling the revenue_mensuel from inside it self, causing an infinite loop.
you do not need to return anything from the function since you assign the result to the element directly.

Html issues

you have left the h1 open
you do not need a different form for each input element

All changes together give

function revenue_mensuel() {
  var salaire = +document.getElementsByName("salaire")[0].value;
  var pension = +document.getElementsByName("pension")[0].value;
  var autre = +document.getElementsByName("autre")[0].value;
  document.getElementById("revenue").value = salaire + pension + autre;
}

 <h1> vos revenus mensuels </h1>
<br/>
<div>
  <form>
    salaire mensuel (avant impots):
    <input type="number and decimal/floats" name="salaire">
    <br/>pension alimentaire recus:
    <input type="number and decimal/floats" name="pension">
    <br/>autre revenue mensuels:
    <input type="number and decimal/floats" name="autre">
    <br/>total des revenue mensuel:
    <input id="revenue" type="text" />
    <input type="button" onclick='revenue_mensuel()' />
  </form>
</div>

user2182349 · Accepted Answer · 2015-10-28 01:55:58Z

0

You should use

<input type="number" name="...">

there is no such thing as type="number and decimal/floats"

This validator will help you fix your code: http://validator.w3.org/

answered Oct 28, 2015 at 1:55

user2182349

9,8323 gold badges31 silver badges44 bronze badges

Collectives™ on Stack Overflow

Javascript functions that adds three inputs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related