Getelementbyid() Returns Null Even Though the Element Exists

getElementById() returns null even though the element exists

You have to put this in a document load event. The DOM hasn't gotten to abc by the time the script is executed.

Javascript - getElementById() returns null even though the element exists

top appears to be a reserved variable -- it resolves to in your function. Try naming top something else like _top and you shouldn't get any errors.

getElementById returns null?

It can be caused by:

  1. Invalid HTML syntax (some tag is not closed or similar error)
  2. Duplicate IDs - there are two HTML DOM elements with the same ID
  3. Maybe element you are trying to get by ID is created dynamically (loaded by ajax or created by script)?

Please, post your code.

Keep getting an error because getElementById returns null

Your script is running before the body is encountered so at that point, the element doesn't exist and your document.getElementById("sjuku") line fails. Move your script to just before the closing body tag.

<!DOCTYPE html>
<link rel="stylesheet" href="style.css">
<div id="sjuku"></div>

<script src="main.js"></script>

getElementByID() function is returning null value

One possible reason could be that your code is running before the DOM is fully loaded. Wrap your code with DOMContentLoaded:

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

<script>  document.addEventListener("DOMContentLoaded", function(event) {    //Intro    alert("Hey! Welcome to my page!!");    var a = prompt("How are you today?");    alert("Happy to know that you are " + a);    var header = document.getElementById("theheader");    console.log("h2 is " + header); = "red";       function getRandomColor() {        var letters = "0123456789ABCDEF";        var color = '#';        for (var i = 0; i < 6; i++) {            color += letters[Math.floor(Math.random() * 16)];        }        return color;    }    function changeHeaderColor(){        colorInput = getRandomColor() = colorInput;    }
setInterval(changeHeaderColor,500); });</script>
<h2 id = "theheader"> Arnab Sinha </h2>

getElementById() returns null although the element exists

Please remove .toString() in this statement var chkd = document.getElementById(checkboxid.toString()); and see if you are able to access the input tag. Alternatively you can try accessing the input tag using the tagname like this: document. getElementsByTagName('input')[0] which will give you access to the first input tag.


For dynamically generated elements we can use addEventListener. All you need to add is a wrapper div tag. I've updated the jsFiddle: with a wrapper div tag please have a look at it. This works perfectly on all the dynamically added elements.

Related Topics

Leave a reply