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

javascript codeplayground web script

7th Apr 2017, 5:12 AM

ǝᴉpoʞ

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

+ 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

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

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

+ 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

+ 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

+ 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

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

+ 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

+ 1

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

28th Apr 2017, 3:54 AM

Daniel Mertins

+ 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

+ 1

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