1

Hello I'm new to javascript, and I'm try to write out some code for a test site and I'm having some problems, dow below is my code and I keep getting this error and i can't figure out why.

TypeError: null is not an object (evaluating 'document.getElementById("h3").innerHTML = "<h3>You Are up to date!</h3>"')

This is my second method i tried using. what I'm trying to do it have a have a version list this first one i had was that it would pull a .js file and build a table, but that didn't work so i thought i would try this, but guess what happened? not working

my code that I'm using now is below. if you can help that would be amazing. thanks, Dakmessier

var current = "1.0";
function get_latest(){
document.getElementById("bob").innerHTML = current;
}

if (local != current){
document.getElementById("Get").innerHTML = "<button><a href=\"bla\">Get the Latest Update!</a></button>";
} else if (local == current){
 document.getElementById("h3").innerHTML = "<h3>You Are up to date!</h3>";
} else {
document.getElementById("h3").innerHTML = "<h3>Sorry, unable to check for update.</h3>";
}
robbmj
  • 16,085
  • 8
  • 38
  • 63
Dakmessier
  • 13
  • 1
  • 4

5 Answers5

2

document.getElementById(id) finds an element with a given id value in your HTML. An id value looks like this:

<div id="myHeader">Some Content</div>

And, then you can find that element with:

document.getElementById("myHeader");

ID values must be unique in each document so there should only ever be one element with a given ID.

If an id isn't what you really want, you can find elements other ways, by tag type, by class name, by attribute, etc... using CSS selectors with document.querySelectorAll().

For example, if you wanted to find all <h3> tags, you could do this:

var items = document.querySelectorAll("h3");

Here are some other reasons that document.getElementById(...) might fail to find what you want it to find:

  1. The Javascript code is running before the DOM elements have been parsed and loaded so thus the element is actually not there yet when you're running the code. This is common with code run from the <head> section of the document.

  2. You have an HTML error in how you are specifying the id value in the HTML.

  3. You have an HTML error that causes the browser not to parse your HTML properly.

  4. You have a script error that cause your script to abort before it gets to the part you want to run.

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • yep i understand that, thats i what i have going but I'm still getting that error – Dakmessier Apr 22 '15 at 23:28
  • @Dakmessier - You will need to show us your HTML (ideally show us the whole document). Another reason that it may not find the desired item is if you are running your Javascript BEFORE the DOM has been loaded (like if the code is running in the `` section of the document). – jfriend00 Apr 22 '15 at 23:29
  • so if i change where the ` – Dakmessier Apr 22 '15 at 23:34
  • @Dakmessier - You can try moving the ` – jfriend00 Apr 22 '15 at 23:36
0

Indeed document.getElementById returns null if it can't find an element with the Id specified.

Also the statement:

if (local != current){
 // ..
} else if (local == current){
 // ..
} else {
 // ..
}

is a bit odd. If local != current is false then local == current must be true. The else if (...) is redundant and the else part will never be run.

robbmj
  • 16,085
  • 8
  • 38
  • 63
  • well i just going to let people download the site to use, so then the .js file is hosted else where and this is the local. file so if it can't find the current var then is will go to the else and say it can't find it – Dakmessier Apr 22 '15 at 23:36
  • The `else` part can't be reached, no matter what. – robbmj Apr 22 '15 at 23:39
0

hey man the bast thing you should do is the following example, feel free to copy it on your snippet of code:

function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed!";
}
<!DOCTYPE html>
<html>
<body>

<p id="demo" onclick="myFunction()">Click me to change my HTML content (innerHTML).</p>

</body>
</html>

I WILL EXPLAIN YOU THIS ANSWER: this is an html + an inline script that makes the inner html work. As far as concerned with your answer it was unclear where your code stopped, anyway test my snippet of code and let me know

Riccardo
  • 66
  • 2
  • 16
0

I know it's an old question, but I was having the same issue and was trying hard to find the solution for some time.

The problem was that I was executing the script before the page loaded. Thus it wasn't able to find the object that we're trying to catch.

So either use jquery document.ready function or else move your script to the end of the html.

I hope this helps

Nabeel Khan
  • 3,715
  • 2
  • 24
  • 37
0

fix an error of getting the value of a as null

Uncaught TypeError: a is null

code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <script>
        let a = document.getElementById('i');
        document.addEventListener('mouseup',function(){
            a.innerHTML='clean';
        })
        
    </script>
<body>
    <h3 id="i">not clean</h3>
</body>
</html>

this shows as error in console as

Uncaught TypeError: a is null

you can fix it by making your script tag before 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3 id="i">not clean</h3>
    <script>
        let a = document.getElementById('i');
        document.addEventListener('mouseup',function(){
            a.innerHTML='clean';
        })
        
    </script>
</body>
</html>

this might fix!!

yaman jain
  • 11
  • 2