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

html javascript null js help bug style getelementbyid self-learning queryselector

11th Jan 2024, 12:53 AM

Bianca Clara Correia Kusunoki

8 ответов

+ 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

11th Jan 2024, 1:06 AM

Odyel

+ 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... ... }

11th Jan 2024, 1:11 AM

Bob_Li

+ 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.

11th Jan 2024, 1:16 AM

Bianca Clara Correia Kusunoki

+ 2

11th Jan 2024, 1:18 AM

Bianca Clara Correia Kusunoki

+ 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 !! ^^

11th Jan 2024, 1:17 AM

Bianca Clara Correia Kusunoki

+ 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.

15th Feb 2024, 3:22 PM

Bob_Li

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.

11th Jan 2024, 1:00 AM

Bianca Clara Correia Kusunoki

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

15th Feb 2024, 2:58 PM

StealthyTaco