+ 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?
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
+ 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.
+ 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
+ 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>
+ 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);
+ 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
+ 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
+ 4
@daniel mertins.. that's definitely the best answer for the playground script loading order. I like the way you think..
+ 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/
+ 1
@kodie ivie
Thank you. I'm glad it helped. 😊
+ 1
@Kirk Schafer
What a coincidence!
I remembered. Although I haven't had time to analyze (understand) your comment yet. 😀
+ 1
Hello sir plz do anyone help in learning php.. Python and andorid... Bcz i wanted to learn
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
Often have questions like this?
Learn more efficiently, for free:
Hot today
Sticky position
2 Votes
Help please?
3 Votes
Online voting system
2 Votes
Ejercicio Pytho
0 Votes
What is that z for
0 Votes
Suggestions needed
4 Votes
SQL practice
2 Votes
Ruby programming?
3 Votes