Create a "calculation form" in javascript

Question

so I have a project now, as an addition to my company'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

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
– 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
– Antero Duarte, Commented Sep 17, 2013 at 10:36

cocco · Accepted Answer · 2013-09-17 10:43:57Z

2

there are many errors inside your code

document.getElementById() needs the element id in brackets ''
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.
your executing the function onload... but you want it to be executed when the button is clicked & onchange.
you don't need to add value if empty and name if you use getElementById
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>

answered Sep 17, 2013 at 10:43

cocco

16.8k7 gold badges65 silver badges77 bronze badges

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

1 Comment

Antero Duarte Over a year ago

im sorry about all those errors, but they are mostly things i had done right and changed it when i was running around like crazy looking for a solution, your solution works and gives me a base to implement everything how i want it to, so, thank you so much for your help :)

Steve · Accepted Answer · 2013-09-17 12:52:37Z

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.com/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>

Collectives™ on Stack Overflow

Create a "calculation form" in javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related