New course! Every coder should learn Generative AI!
Try a free lesson0
FIXED. (HELP: getElement returns null when it worked before! Tried to fix it all day and nothing changed.)
Hello everybody! :) So, I'm studying on the playground and everything, when a piece of my code suddenly stopped working. I've tried everything, then I decided to separate that part of the original code. Thing is, it worked before, and now not anymore. I haven't changed anything. I've been searching and trying to change everything that I could think of And everything that people suggested to end that problem. I'm also studying trying to find a solution, and after I type that I'll continue. If someone may see something I'm not seeing, please, if you could help and point that out so I could learn and not repeat it on my code. I'll put some of my tries on the comments. Hugs, Kusunoki. <3 https://sololearn.com/compiler-playground/WhKnq1bpox7S/?ref=app
8 Answers
+ 3
When the HTML document is read, it is being loaded sequentially by the browser, so depending on where the default placement of the script tag for the JS code is in the DOM, it might run before all of the elements are loaded and are ready for the script. As we don't really have control where the placement of the script will be inserted by SoloLearn, you can instead wrap the logic in an eventListener to ensure that all of the elements are loaded in
https://sololearn.com/compiler-playground/WxcNE1peCb48/?ref=app
JS is not my specialty, but I'm pretty sure that's what's happening
+ 4
The problem is the js tab is executed before the html loads, so js cannot find anything.
If you write your code in the js tab, you should put your js code inside an onload function
onload = () =>{
your code...
...
}
+ 2
Oh! The code works now!! Thank you Odyel , really!!
As I was noticing, the block of code that made it happen was:
document.addEventListener("DOMContentLoaded", ()=> {
Right?
I haven't learned about that yet, so I'm really grateful for your answer, truly! I'll be learning more about that from now on.
Thank you very much.
+ 2
<!--
ISSUE FIXED.
Thank you all!
<3
-->
+ 1
Ah! So that block of code is also a way of making my code work? That's really interesting!
I'll be definitely trying that and learning more about it, I was truly lost about what the error was about and now I can totally get the logic of JS executing first!
Thank you very much for helping me, Bob_Li !! ^^
+ 1
Robert Atkins
you should start a new thread rather than adding to someone else's post.
Anyway, your addEventListener have a syntax error. Do not add parenthesis to the callback function.
do this:
document.addEventListener("DOMContentLoaded", updateList);
not this;
document.addEventListener("DOMContentLoaded", updateList())
edit--
I see you edited your code. yeah, that's the more commonly used variation here in Sololearn.
0
Tries:
1. I've tried to change the getElementById for querySelector, didn't worked.
2. Tried to exchange the ID for class and getElementByClass, didn't worked.
3. Tried to put the code inside <script></script> by the end of the <body> on HTML. Didn't worked but since I would like to work separated on the JS I didn't researched that for now (i'll go later, though.)
4. Tried to call it by using a function.
5. Tried to delete all that and rewritte everything.
6. Tried to change all the names (variables, id, even the color and border pxs.). Didn't worked.
And many others tries. I don't know if I need to learn something more complex that I didn't learned that yet, BUUT my code was made for training purposes after all that I've learned here on sololearn!
I've been revisiting the course of JS, also trying to learn by my own on other websites (and analyzing other codes and their bugs and fixes, like on stack overflow), but I can't get what I'm doing wrong.
0
Bob_Li hello, could you take a look at my code real quick? I am having the same issue, but after adding both a "DOMContentLoaded" and regular "Load" event, I'm still receiving null, at this point im definitely overlooking something simple in sure.
Update: the issue I had was defining a function outside of the Onload check, I defined the function outside of the load check, the function had calls to the DOM, since the defined function was outside of the load scope, it would prep the variables inside, including the DOM calls and then when the function was called Onload it had a null value due to the prep work before the load.
placing the definition of the function inside of the load event resolved the issue
https://sololearn.com/compiler-playground/WX1WTJiBBxYq/?ref=app
Often have questions like this?
Learn more efficiently, for free:
Hot today
Python Question
3 Votes
How to learn fast C?
0 Votes
Initials of name
1 Votes
Forever loop pls help
0 Votes
Css In python
0 Votes