so I have a project now, as an addition to my pany's website, we want to show our clients how much they can save on gas by buying one of our electric cars, I'm responsible for making it happen, I don't know how to approach this using javascript, can you guys give me a hand? our marketing guy got the idea from this website, that is basically what we want, but I was hoping i could make it a little better on some aspects:

1st-the client wouldn't have to press submit to see the results, as they fill the last field, the calculated part is populated automatically, for this i've been fiddling with the onChange event, unsuccessfully though xD

here's what I have so far, it is not working, at least on dreamweaver's live mode, haven't tested it online yet as I was hoping to develop the whole thing offline:

<script type="text/javascript">

function calc(){

var km=document.getElementById(km).value;
var euro=document.getElementById(euro).value;
var consumo=document.getElementById(consumo).value;

var cem_km=consumo*euro;

var fossil_day=(cem_km*km)/100;
return fossil_day;
}

</script>

<form name="calc" id="calc"  >
  <p>
  Km/dia
  <input type="text" name="km" id="km" value="" />
  </p>
  <p>
  €/Litro
  <input type="text" name="euro" id="euro" value="" />
  </p>
  <p>
  Litros/100km
  <input type="text" onChange="calc()" name="consumo" id="consumo" value="" />
  </p>

   <input type="button" onClick="calc()" name="submit" id="submit" value="Calcular" />

<script type="text/javascript">
 var fossil_day = calc();
document.write('<p>'+fossil_day+'</p>');
</script>

</form>

Please note that although I have this already, I wouldnt mind not doing this at all and using another solution, even if it doesnt use forms, I'm just showing what i have already so you can tell me how I'm wrong and how I can have a better approach at it

so I have a project now, as an addition to my pany's website, we want to show our clients how much they can save on gas by buying one of our electric cars, I'm responsible for making it happen, I don't know how to approach this using javascript, can you guys give me a hand? our marketing guy got the idea from this website, that is basically what we want, but I was hoping i could make it a little better on some aspects:

1st-the client wouldn't have to press submit to see the results, as they fill the last field, the calculated part is populated automatically, for this i've been fiddling with the onChange event, unsuccessfully though xD

here's what I have so far, it is not working, at least on dreamweaver's live mode, haven't tested it online yet as I was hoping to develop the whole thing offline:

<script type="text/javascript">

function calc(){

var km=document.getElementById(km).value;
var euro=document.getElementById(euro).value;
var consumo=document.getElementById(consumo).value;

var cem_km=consumo*euro;

var fossil_day=(cem_km*km)/100;
return fossil_day;
}

</script>

<form name="calc" id="calc"  >
  <p>
  Km/dia
  <input type="text" name="km" id="km" value="" />
  </p>
  <p>
  €/Litro
  <input type="text" name="euro" id="euro" value="" />
  </p>
  <p>
  Litros/100km
  <input type="text" onChange="calc()" name="consumo" id="consumo" value="" />
  </p>

   <input type="button" onClick="calc()" name="submit" id="submit" value="Calcular" />

<script type="text/javascript">
 var fossil_day = calc();
document.write('<p>'+fossil_day+'</p>');
</script>

</form>

Please note that although I have this already, I wouldnt mind not doing this at all and using another solution, even if it doesnt use forms, I'm just showing what i have already so you can tell me how I'm wrong and how I can have a better approach at it

• javascript
• jquery
• html
• forms
• calculator

• jQuery would probably make your life a whole lot easier – Steve Commented Sep 17, 2013 at 10:32
• 1 Do you have at least try to debug your code? – A. Wolff Commented Sep 17, 2013 at 10:32
• 1 assigning a function to an event is done by providing the name of the function without the (), the returned value is not set as the innerHtml of the element that called it – Luka Commented Sep 17, 2013 at 10:33
• @user574632 how would i approach it using jquery and how would it make it easier? im all for better solutions! :) – Antero Duarte Commented Sep 17, 2013 at 10:36
• 1 @AnteroDuarte Are you talking to me in your last ment? – A. Wolff Commented Sep 17, 2013 at 10:42

2 Answers 2

there are many errors inside your code

1. document.getElementById() needs the element id in brackets ''
2. you can't create a element with the same name,id as a function calc else it will throw an error as it's an object and not a function.
3. your executing the function onload... but you want it to be executed when the button is clicked & onchange.
4. you don't need to add value if empty and name if you use getElementById
5. return false in the function on buttons inside form else it could send the form and so refresh the page.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>calc</title>
<script>
function calc(){
var km=document.getElementById('km').value;
var euro=document.getElementById('euro').value;
var consumo=document.getElementById('consumo').value;
var cem_km=consumo*euro;
var fossil_day=(cem_km*km)/100;
document.getElementById('result').innerHTML=fossil_day;
return false
}
</script>
</head>
<body>
<form>
<p>Km/dia<input type="text" id="km"/></p>
<p>€/Litro<input type="text" id="euro" /></p>
<p>Litros/100km<input type="text" onChange="calc()" id="consumo" /></p>
<input type="button" onClick="calc()" value="Calcular" />
</form>
<div id="result"></div>
</body>
</html>

Useing jQuery (and html5 type="number" form fields):

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<form>
    <p>
        Km/dia
        <input type="number" name="km" id="km" value="" />
    </p>
    <p>
        €/Litro
        <input type="number" name="euro" id="euro" value="" />
    </p>
    <p>
        Litros/100km
        <input type="number"  name="consumo" id="consumo" value="" />
    </p>
    <div id="fossil-day"></div>
</form>
<script src="http://codeorigin.jquery./jquery-1.10.2.min.js"></script>
<script>
    function calculate(){
        var km = $('#km').val();
        var euro = $('#euro').val();
        var consumo = $('#consumo').val();
        var cem_km = consumo*euro;
        var fossil_day = (cem_km*km)/100;

        $('#fossil-day').html(fossil_day);

    }

    $(function() {
        /*when #consumo input loses focus, as per original question*/
        $('#consumo').blur(function(){
            calculate();

        });
    });
</script>
</body>
</html>