views:

38

answers:

5

For some reason I get an document.getElementById('id') is null JS error on line 7 with the following markup and script:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Quadratic Root Finder</title>
<script>
document.getElementById('calculate').onclick = function calculateQuad()
{
    var inputa = document.getElementById('variablea').value;
    var inputb = document.getElementById('variableb').value;
    var inputc = document.getElementById('variablec').value;

    root = Math.pow(inputb,2) - 4 * inputa * inputc;
    root1 = (-inputb + Math.sqrt(root))/2*inputa
    root2 = (-inputb + Math.sqrt(root))/2*inputa 

    document.getElementById('root1').value = root1;
    document.getElementById('root2').value = root2;
    if(root<'0')
    {
        alert('This equation has no real solution.')
    }
    else {
        if(root=='0')
        {
            document.getElementById('root1').value = root1
            document.getElementById('root2').value = 'No Second Answer'
        }
        else {
            document.getElementById('root1').value = root1
            document.getElementById('root2').value = root1
            }
        }
};
document.getElementById('erase').onlick = this.form.reset();
</script>
<style>
#container
{
    text-align: center;
}
</style>
</head>

<body>
<div id="container">
<h1>Quadratic Root Finder!</h1>
<form id="form1">
    a:<input id="variablea" value="" type="text">
    <br/>
    b:<input id="variableb" value="" type="text">
    <br />
    c:<input id="variablec" value="" type="text">
    <br />
    <input id="calculate" value="Calculate!" type="button">
    <input id="erase" value="Clear" type="button">
    <br />
    <br />
    Roots:
    <br />
    <input id="root1" type="text" readonly>
    <br />
    <input id="root2" type="text" readonly>
</form>
</div>
</body>
</html>

What's the real problem here?

A: 

At the point which the javascript is actually run, there is no element with an id of 'calculate'. You need to make sure your javascript runs after your required elements have been created. My advice would be to use a common javascript framework like jquery. You would then just attach your script to run on dom ready:

$(document).ready(function() {
    // Handler for .ready() called.
});
Zack
Wow, I keep forgetting these simple mistakes, but now I got you. Now that I think about it, jQuery would make this selecting business a hell of a lot easier than `getElementById` trash all the time, but I'm trying to gain exposure to plain JS but I can still use your suggestion, thx!
BOSS
It seems like there is a huge push to use jQuery.
Doug
I think this is not a jquery question.
Bang Dao
+2  A: 

If you don't feel like including jQuery, then document.ready = function () {} will work fine too.

tandu
A: 

Alternatively: window.onload = function(){} works as well

Azmisov
+1  A: 

It is indeed null. Your element doesn't exist on the page yet. Either move your <script> block below your code or add a window.onload event.

Jason McCreary
A: 

You can fix it by moving the script to the end of the body, or try to use window.onload, or window.addEventListenner
Check the http://v3.thewatchmakerproject.com/journal/168/javascript-the-dom-addeventlistener-and-attachevent
and http://javascript.about.com/library/blonload.htm

Bang Dao