codeplayground issue with javascript | Sololearn: Learn to code for FREE!


codeplayground issue with javascript

I'm sure it's just me but when i try my code using the playground it gives me a null message on the eventListener but when I copy my whole code into a script tag in the HTML it runs fine.. so whats this all about?

4/7/2017 5:12:31 AM


13 Answers

New Answer


you can do the following: in the JS tab, create init function that will be called once the HTML is completely loaded you can either put all your code in the init function or just the initialization of event listeners, or any other action that need information from the HTML page function init(){ // your initialization stuff here } window.onload=init; // call init once HTML loaded


Do you know if the playground belongs to the body or to the head? You could be adding an eventlistner to an element before it was parsed in HTML.


@burey --Thanks! worked like a charm.. I would still like to know the reason for it.. I was just adding event listeners to text inputs with ID's inside of p tags.. would the js load before the HTML? Im not sure how the playground links to js.. but I think your both right.. thanks


The template I follow. Basically put functions and empty vars in the [JS] tab, then initialize in onload() or init() called from the script at bottom of body. <head> external script and css links (you type) <!-- autoinserted by SoloLearn (document not ready) --> <style id="style-from-editor"></style><script id="script-from-editor"></script> </head> <body> <script> call into JS functions here (document is ready) </script> </body>


@Daniel Mertins; huh. I forgot I'd commented on that :). I was trying to hint that the browser might go 'undefined' (asynchronous) but it *is* a clever test. Also, I published an error console that catches errors SoloLearn wasn't able to, identifies where they appear (HEAD, JS or body script) and corrects for line number offsets resulting from the insert. Of a few versions, this one's easiest (includes and a div) and runs as an overlay so it doesn't interfere: You'll notice I catch 3 errors and SoloLearn doesn't show anything. Finally, to see exactly what SoloLearn inserts: // end of body alert(document.getElementsByTagName('html')[0].innerHTML);


it appears as the JS is loaded first so any encounter in the JS which requires access to the HTML is a potential error waiting to happen if the HTML was not parsed coompletely first. another option is creating a <script></script> at the bottom of the HTML just before the </body> closer but that will just be very messy for big codes


Code in SoloLearn JS tab is included right before </head> tag. It will be included after any other <script> tag included in head. This code tries to analyze this behavior:


@daniel mertins.. that's definitely the best answer for the playground script loading order. I like the way you think..


Ooo, here's something I didn't​ know we could do (HTML5, going forward details!): <script defer ...> allows the external JavaScript file to run when the DOM is loaded, without delaying page load first. <script async ...> allows the external JavaScript file to run when it's available, without delaying page load first.


@kodie ivie Thank you. I'm glad it helped. 😊


@Kirk Schafer What a coincidence! I remembered. Although I haven't had time to analyze (understand) your comment yet. 😀


Hello sir plz do anyone help in learning php.. Python and andorid... Bcz i wanted to learn


my code playground JS is not working today, it was working in last 2 days. don't know what to do. I want to practice