CODEWITHSUNDEEP
javascripthtml
Emil
Emil

Reputation: 3

document.getElementById only working in firefox

I've written a js to do some math, just some simple stuff, and it is working fine when I'm using firefox, but when I try to use it with another browser - it dosen't. I'm new to html and js. Below is the whole thing.

code: 

    <!DOCTYPE html>

<html>
<head>
    <title>Forkalkulator</title>
</head>

<body>

<p><b>Forkalkulator </b> </p>
<form action="history.go()" method="post" enctype="multipart/form-data">
        <label for="vekt">Hundens vekt:</label>
        <input type="number" name="vekt" id="vekt" placeholder="vekt"><br>

        <label for="prisvf">Pris p&aring; v&aring;tforet:</label>    
    <input type="number" name="vfor_pris" id="vfor_pris" placeholder="pris pa vatfor"><br>

        <label for="pristf">Pris p&aring; t&oslash;rforet;:</label>     
    <input type="number" name="tfor_pris" id="tfor_pris" placeholder="pris pa torrfor"><br>

        <label for="fett">Fettprosent;</label> 
    <input type="number" name="tfor_fett" id="tfor_fett" placeholder="fett i torrfor">

        <label for="karb">Prosent karbohydrater</label>    
    <input type="number" name="tfor_karb" id="tfor_karb" placeholder="karb i torrfor">

        <label for="protin">Proteinprosent</label>    
    <input type="number" name="tfor_prot" id="tfor_prot" placeholder="prot i torrfor"> <br>

        <input type="button" value="OK" onClick="history.go()">
    <input type="reset" value="Reset" onClick="history.go()">
</form>




 <script language="javascript">

//henter verdien av input
    var vekt = document.getElementById('vekt').value;
    var pris = document.getElementById('vfor_pris').value;


//for å regne ut vedlikeholdsbehovet
var vedlike = vekt * 134 * 0.75;

//document.write(vekt);
document.write ('<br>Vedlikeholdsbehov ' + vedlike + ' kcal');

//regne ut antall gram med vom iht. vedlikeholdsbehov

var gram = vedlike/2.3;
var gram2 = gram.toFixed(2);



//torrfor

var tfor_fett = document.getElementById('tfor_fett').value / 100;
var tfor_karb = document.getElementById('tfor_karb').value / 100;
var tfor_prot = document.getElementById('tfor_prot').value / 100;
var tfor_tot = tfor_fett + tfor_karb + tfor_prot;

//regne ut hvor mange kcal utifra naeringsinnhold

var tfor_fett_kcal = tfor_fett * 9;
var tfor_karb_kcal = tfor_karb * 4.5;
var tfor_prot_kcal = tfor_prot * 4.5;
var tfor_tot_kcal = tfor_fett_kcal + tfor_karb_kcal + tfor_prot_kcal;
var tfor_tot_kcal2 = tfor_tot_kcal /1000;

//document.write('<br><br><br><b> torrfor  </b>    ' + tfor_tot_kcal + ' <br><br>');


//document.write('<br><br><br>total kcal ' + vfor_tot_kcal);

var kg = gram / 1000;
var pris_hund = kg * pris;
var pris_hund2 = pris_hund.toFixed(2);

document.write('<br><br><h3>Vom </h3>');
document.write('<br><br>Antall gram med vom: ' + gram2); 
document.write('<br><br>Pris per hund: ' + pris_hund2);


var tfor_gram = vedlike / tfor_tot_kcal;
var tfor_gram2 = tfor_gram.toFixed(2);

var tfor_kg = tfor_gram / 1000;
var tfor_pris = document.getElementById('tfor_pris').value;

var tfor_pris2 = tfor_pris * tfor_kg;
var tfor_pris3 = tfor_pris2.toFixed(2);

document.write('<br><br><h3>T&oslash;rrfor </h3>');
document.write('<br><br>Antall gram med torrfor: ' + tfor_gram2); 
document.write('<br><br>Pris per hund: ' + tfor_pris3);


</script> 
</body>
</html>

Upvotes: 0

Views: 141

Answers (1)

Larry K
Larry K

Reputation: 49114

I'm surprised that it's working at all.

The basic code is fine, good job! The problem is that your script is looking up the values from the form as soon as the script runs--which is about the moment everything becomes visible on the page.

So essentially, your script is calculating the values of an empty form.

To fix: put all of the script into a Javascript function. Then add a button to the form that will invoke the function.

This SO question shows you how to add an onlick handler to do it.

Upvotes: 1

Related Questions