Codepen DOM nodes appear NULL in console- SOLVED

Codepen DOM nodes appear NULL in console- SOLVED
0

#1

Looking for resolution to codepen issue (or perhaps a larger gap in my knowledge). When I try to append an element to the page, it returns null, even when it is clearly not.
Or maybe it is??

<div id='search-bar'>
  <input id='input' type='text' placeholder='enter text'/>
</div>
<div id='error-message'></div>
</div>

I try to append a simple string as an message. Not only is there an error in the console, I cannot even select the DOM node in the console.

< document.querySelector("#error-message")
< null
 var node = document.createTextNode('p');
 document.querySelector('#error-message').appendChild(node)

But if I find the node, error-message and click on it, then it allows me to target it. Why is this?

jquery behaves slightly better. At least the node appears with a value of 0, but at least it’s not blank. Still, not usefull.

This occurs for all html elements that are not physically visible, i.e. blank divs.

This has throw an unnecessary wretch into development causing bugs that I am not sure are legit. Or is this a thing?


#2

I do not see the message you are trying to append. I only see you appending the letter ‘p’ to the div with id=“error-message” currently.

Below is a simple way of doing what I think you want:

var message = "This is an error message."
document.querySelector('#error-message').innerText = message;

#3

U get a P in the page, or the console?
With that html, what happens if U type this.

document.querySelector("#error-message")

Just can’t figure out why it’s null.


#4

Can you link your codepen please? I do not understand what you mean by null. Where are you seeing the value null? In the console? In the page?


#5

Maybe I have an issue with the logic. Does the html element have to physically have text in it to be targeted? By null I mean when U type this in the console

document.querySelector("#error-message")

https://codepen.io/chri_del/pen/MrbROg

This has only one html string and I cannot target it. This means I cannot append anything to it.

A useless example, but the same problem I face in my project. Do U get null?

This is probably something stupid- thanks for helping.


#6

This is more of a codepen issue. When you type:

document.querySelector("#error-message")

into the console, you are looking inside Codepen’s iframe and not your current html section. If you type:

document.querySelector("div")

you will not see your one div, but a Codepen div.

If you want to see what is in your code’s div with id=“error-message”, then you need to put the following into your JavaScript:

console.log(document.querySelector("#error-message"));

#7

Ahhh, well what about this. It works on this page, FFC.

var elem = document.createElement('span');
    var node = document.createTextNode('TEEEEEEEEESSSSSSSSST')
	elem.appendChild(node)

    document.querySelector("#title-topic").appendChild(elem)

But not in the Codepen console with the #error-message


#8

I want to test this function in the console.

function makeTextNode(text, element, toAppend){
    var elem = document.createElement(element);
    var node = document.createTextNode(text)
	elem.appendChild(node)

    document.querySelector(toAppend).appendChild(elem)

}

Again, it works here in FCC.

makeTextNode('span', 'TESTTTTEST', '#topic-title')

Can I make it work in codepen? Or is working in codepen do error prone? Just do a copy/paste later?


#9

It does work as long as you have a div with id=“title-topic” in your html section.


#10

But it doesn’t. That’s why I am writing here.

VM14200:5 Uncaught TypeError: Cannot read property 'appendChild' of null


#11

Can you please post the Codepen link with all the code you are having trouble with?


#12

It’ the same codepen as above.

https://codepen.io/chri_del/pen/MrbROg
This is the function-

function makeTextNode(text, element, toAppend){
    var elem = document.createElement(element);
    var node = document.createTextNode(text)
	elem.appendChild(node)

    document.querySelector(toAppend).appendChild(elem)

}

And

makeTextNode('tests', 'span', '#error-message')

It’s the same issue I am facing in the normal project. Which U can see here
https://codepen.io/chri_del/pen/wpzGWG

The thing is, it works on the FCC site. But not on the codepen site. At least not from the console. (See any typos?)


#13

Anyway, it works from the editor. Must be something to do with the complexity of codepen.


#14

You do not have the same code in your Codepen (https://codepen.io/chri_del/pen/wpzGWG) as you do above. That is why it does not work.

Your Codepen has:

elem.appendChild.node;

and it should be:

elem.appendChild(node);

#15

Yeah, thanks I fixed that. But point is, as a beginner, to find bugs like this, I use the console.

The staring point would be to make sure I can even target the node. Which I could not. This function still does not work for me from the console. If I can’t target the node then I know that’s the first problem with my function.

So, if it’s null in the console then this leads me down a path of uncertainty. I am not in a position to accuse Codepen of bugs. 99.9999% of the time it is my own code.

But in this case, I wasted more than an hour with this null problem (only in the console). Still, if I am not missing something, re: the null in the console issue, please let me know.

Thanks for helping me on xmas


#16

When working with Codepen, I suggest you write console.log() statements for debugging purposes, because typing directly in the console when on the Codepen site might not show you the results you expect (based on what I said above). The Codepen site is complex and has a lot of things working behind-the-scenes. It uses IFrames in such a way that direct console access is not accessing your code, put Codepen’s code.


#17

Thanks for the tip. And yes the complexity must be quite vast.

This discussion did indirectly help me fix the bug. Cheers