+ 12

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?

7th Apr 2017, 5:12 AM
ǝᴉpoʞ
ǝᴉpoʞ - avatar
13 Answers
+ 15
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
7th Apr 2017, 10:09 AM
Burey
Burey - avatar
+ 11
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.
7th Apr 2017, 6:50 AM
Emore Anzolin
Emore Anzolin - avatar
+ 10
@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
24th Apr 2017, 4:41 AM
ǝᴉpoʞ
ǝᴉpoʞ - avatar
+ 8
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>
27th Apr 2017, 3:55 AM
Kirk Schafer
Kirk Schafer - avatar
+ 7
@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: https://code.sololearn.com/WkUnKUuuYYpT/?ref=app 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);
27th Apr 2017, 2:16 PM
Kirk Schafer
Kirk Schafer - avatar
+ 6
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
24th Apr 2017, 7:13 AM
Burey
Burey - avatar
+ 6
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: https://code.sololearn.com/WDvBQUJ2AxLP/?ref=app
27th Apr 2017, 12:06 PM
Daniel Mertins
Daniel Mertins - avatar
+ 4
@daniel mertins.. that's definitely the best answer for the playground script loading order. I like the way you think..
27th Apr 2017, 1:54 PM
ǝᴉpoʞ
ǝᴉpoʞ - avatar
+ 3
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. http://caniuse.com/#search=defer <script async ...> allows the external JavaScript file to run when it's available, without delaying page load first. http://caniuse.com/#feat=script-async http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/
27th Apr 2017, 2:39 PM
Kirk Schafer
Kirk Schafer - avatar
+ 1
@kodie ivie Thank you. I'm glad it helped. 😊
28th Apr 2017, 3:54 AM
Daniel Mertins
Daniel Mertins - avatar
+ 1
@Kirk Schafer What a coincidence! I remembered. Although I haven't had time to analyze (understand) your comment yet. 😀
28th Apr 2017, 9:58 PM
Daniel Mertins
Daniel Mertins - avatar
+ 1
Hello sir plz do anyone help in learning php.. Python and andorid... Bcz i wanted to learn
29th Jun 2018, 5:06 PM
pooja kashyap
pooja kashyap - avatar
0
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
18th Oct 2021, 6:52 AM
Mohib Fayyaz
Mohib Fayyaz - avatar