CODEWITHSUNDEEP
javascriptdom
DWigley
DWigley

Reputation: 43

document.getElementById is returning null even after being created

I have some code that I'm trying to run to get an existing element however it keeps returning null despite it existing in the developer console. I've read some stuff about waiting until the window loads before making a call but the code where I am trying to put this does not run on startup and waits until a user action.

I have even run the following and it returns null:

massText = document.createElement('mass_div');
console.log(document.getElementById('mass_div'));

Can anyone tell me why this returns null? I just created the element so why can I not get it? I have even tried making it initially on start up and then getting it and it still returns null. I would love to be able to edit existing elements rather than keep creating them to just modify their display text which I do by:

massText.innerHTML = "blah";

Here is more context. It's not exactly like this:

//lots of functions that create a model and then call this update method. Called every 500ms

function updateText() {
    massText = document.createElement('mass_div');
    massText.style.position = 'absolute';
    massText.style.width = 100;
    massText.style.height = 100;
    massText.style.backgroundColor = "green";
    massText.innerHTML = "Mass of the star is " + matches[pos] + " Solar Masses";
    massText.style.top = window.innerHeight / 10 + 'px';
    massText.style.left = window.innerWidth / 50 + 'px';
    document.body.appendChild(massText);
}

This creates a ton of copies of the element "mass_div"

I would like to append these by doing something like this however it says massText is null

function updateText() {
    if (document.getElementById('mass_div') == null){
         massText = document.createElement('mass_div');
    }else {
         massText=document.getElementById('mass_div');
    }
    massText.style.position = 'absolute';
    massText.style.width = 100;
    massText.style.height = 100;
    massText.style.backgroundColor = "green";
    massText.innerHTML = "Mass of the star is " + matches[pos] + " Solar Masses";
    massText.style.top = window.innerHeight / 10 + 'px';
    massText.style.left = window.innerWidth / 50 + 'px';
    document.body.appendChild(massText);
}

Upvotes: 1

Views: 1959

Answers (3)

PawelSz
PawelSz

Reputation: 164

Generally (irrespectively if it is java, javascript or c#) when dealing with XML or Html Dom the algorithm is the same and simple: 1. create or load document from string or similar, 2. if no root node (new document) create a root node or find an existing root node, 3. create child node with attibutes and values as you desire (there are multiple constructors), 4. append the child node to the root node (or another child - as you wish). 5. you may fire getElementById or GetElementByTag or similar to find node created in point 3.

You have pasted very little code but I assume that you have skipped step 4 and that is the reason of NRE.

In example the missing parts (should be placed before console.log("aaa"): Js:

var aaa = document.createElement("mass_div");
document.body.appendChild(aaa);

C#:

var aaa = doc.CreateElement("mass_div");
rootNode.AppendChild(aaa);

Java:

var aaa = doc.createElement("mass_div");
doc.appendChild(aaa)

More or less this should suit your needs and hope it helps. Kind regards,

P.Sz.

Upvotes: 1

Husni Salax
Husni Salax

Reputation: 2020

Here we go:

var massText = document.createElement('input');  //Here is you create the element input.
masstext.id ='mass_div';      //Here is you set id for created element input
document.appendChild(massText);  //Added to main document


console.log(document.getElementById('mass_div'));  //handle your element by id and log

This is working 100% !

Upvotes: 0

Aminadav Glickshtein
Aminadav Glickshtein

Reputation: 24600

For this to work you should do:

var massText = document.createElement('div');
massText.id='mass_div'
document.appendChild(massText)
console.log(document.getElementById('mass_div')); //This is working

In your code you have 2 issues:

  • The function createElement get element name not element id. So, you have to add the id later
  • The function getElementById get only elements that appended to document. So you have to add the element to the document before

Upvotes: 4

Related Questions