Mixing
A new line for li's causes a JavaScript error [duplicate]
A new line for li's causes a JavaScript error [duplicate]
This question already has an answer here:
What I meant by a new line I was referring to by forcing the text in the code editor to move down the next line for readability not to be confused by the n term. Any ways I have this script that removes the ul next sibling by pressing a button everything
works perfectly but I did not like how in the code editor the two li's were next to each other so as soon as I put the second li on a new line my code generated an error on line 6 it said Uncaught TypeError: Cannot set property 'display' of undefined.
This is what I mean in the code editor
The non-working one
document.addEventListener('DOMContentLoaded',function(){
document.querySelector('button').addEventListener('click',fx);
function fx() {
document.querySelector("#message li").nextSibling.style.display= 'none';
}
});
<ul id='message'>
<li>Coffee (first li)</li>
<li>Tea (second li)</li>
</ul>
<button>Remove</button>
In the editor
The working one
document.addEventListener('DOMContentLoaded',function(){
document.querySelector('button').addEventListener('click',fx);
function fx() {
document.querySelector("#message li").nextSibling.style.display= 'none';
}
});
<ul id='message'>
<li>Coffee (first li)</li><li>Tea (second li)</li>
</ul>
<button>Remove</button>
In the editor
There is no difference between them but look at the images and compare them and you can see that in the first image the li's are not next to each other so why
is something so sensitive and tiny in this situation that I did for readability in the code editor causes this error? The code is the same but the structure of
readability is different caused by the enter button. I know you guys will say dude just don't put the next sibling on a new line in the editor but the thing is I am
planing to put 20 of these and I hate in the code editor where you have to use the horizontal scroll bar to move all the way to the right when you are typing code so is there a way where I can do this
for readability in the code editor with out generating this error I just want to avoid the horizontal scroll bar in the code editor.
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
developer.mozilla.org/en-US/docs/Web/API/…
– melpomene
Jun 29 at 17:18
nextSibling vs. nextElementSibling.
– Teemu
Jun 29 at 17:19
Yes, that tiny thing, pushing the enter button makes it all break, but not because of the line-break character that is added to the code window itself, also because the
nextSibling method will then not be able to find the next sibling element anymore, it will find that line break instead. By using nextElementSibling it will start working again, even with that line break, as that method looks for an element and won't mistake the line break for being one. Btw, that line break is referred to as a text node, compared to an element node– LGSon
Jun 29 at 17:34
nextSibling
nextElementSibling
In addition to my above comment, also if you would add a blank space between the two side-by-side
li, it would break for the very same reason.– LGSon
Jun 29 at 17:41
li
You're changing what nextSibling is, from a li element to just text (whitespace, in your case). Use a more robust method of selecting the element you actually care about.
– jonrsharpe
Jun 29 at 17:17