Codepen DOM nodes appear NULL in console- SOLVED

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?

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.

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.

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?

10

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

VM14200:5 Uncaught TypeError: Cannot read property 'appendChild' of null
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.

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

17

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

This discussion did indirectly help me fix the bug. Cheers