document.getElementById('id') is null javascript error

javascript null

28,066

Solution 1

It is indeed null. Your element doesn't exist on the page yet.

Either:

Move your <script> block below your code
Add a window.onload event.

Solution 2

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

Solution 3

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

28,066

Author by

Qcom

Updated on November 10, 2020

Comments

Qcom over 3 years

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?

Qcom over 13 years

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!
Strawberry over 13 years

It seems like there is a huge push to use jQuery.
Bang Dao over 13 years

I think this is not a jquery question.