+ 2

Can someone please help me with the code below.

I'm doing a JavaScript course via Udemy since I didn't want to rely on once source. Everytime I try to run the code below I get an error pointing at line of my code when I'm using Sololearn's Code Playground. What could be the problem since the problem runs well on Atom.? document.querySelector("button").addEventListener("click",handleClick); function handleClick(){ alert("I got clicked"); }

5th Apr 2020, 9:40 AM
Sidepocket
Sidepocket - avatar
17 Réponses
+ 4
Ok, when you're on sololearn codeplayground ,better to add the window.onload=()=>{ //Your code here } And in your for loop use ";" no "," to separate instructions for (vari=0 ; i<document.numberOfDrumButtons ; i++) I tested that way and it worked.
5th Apr 2020, 3:51 PM
EmmanueLZ.
EmmanueLZ. - avatar
+ 2
Sidepocket , hi, And what is the error message...(type error, is not a function, couldn't initialize or something else...) ?.
5th Apr 2020, 3:10 PM
EmmanueLZ.
EmmanueLZ. - avatar
+ 2
onload = function() { var numberOfDrumButtons = document.querySelectorAll(".drum").length; for (var i = 0,i < document.numberOfDrumButtons,i++){ } document.querySelector("button").addEventListener("click",function(){ alert("I got clicked"); }); };
5th Apr 2020, 3:27 PM
visph
visph - avatar
+ 1
Can you put the link to your code, so we can check the whole? Also sometimes, error occurs because js is loaded before the html and so it doesn't recognize parts of the code.To handle that you have either to put your js in script tag in the html , at the end of it , before the closing </body> tag or start your js file with: window.onload=()=>{ //You insert your code here }
5th Apr 2020, 3:27 PM
EmmanueLZ.
EmmanueLZ. - avatar
+ 1
As you stored your buttons in variable numberOfDrumButtons, you don't have to repeat document in for loop just the name of the variable. Then you gave no instruction in your for loop... Maybe try to put your code within the window.onload=()=>{ } first to see if it give the same error
5th Apr 2020, 3:36 PM
EmmanueLZ.
EmmanueLZ. - avatar
+ 1
Ok my brother, I was doing all of this exactly as it was done on a online course, I just realised that there's an error when executing it on Sololearn's Code Playground.
5th Apr 2020, 3:40 PM
Sidepocket
Sidepocket - avatar
+ 1
Hi, I'm also learning javascript but idk if I'm right though. In line 1 at the end of the line there is a full stop (.) instead of (;) semicolon. I dk whether I'm right or wrong. I just tried to help :)
6th Apr 2020, 3:50 PM
Tabassum Fatiha
Tabassum Fatiha - avatar
0
hello, is the button a #id or a .class? maybe the selector needs the „#“ or the „.“ befor the name.
5th Apr 2020, 10:09 AM
Pas To
Pas To - avatar
0
and note that the queryselector only get the first element in the document with class="button" or id=„button“.
5th Apr 2020, 10:11 AM
Pas To
Pas To - avatar
0
The problem my brother is that every challenge that has 'document.querySelector' gives me an error when I solve it using Sololearn's Code Playground.
5th Apr 2020, 10:16 AM
Sidepocket
Sidepocket - avatar
0
Uncaught TypeError:Can't read property ''addEventListener' of null line:
5th Apr 2020, 3:20 PM
Sidepocket
Sidepocket - avatar
0
Here is my HTML.... <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1 id="title">Drum 🥁 Kit</h1> <div class="set"> <button class="w drum">w</button> <button class="a drum">a</button> <button class="s drum">s</button> <button class="d drum">d</button> <button class="j drum">j</button> <button class="k drum">k</button> <button class="l drum">l</button> </div> <footer> Made with ♥️ in Johannesburg. </footer> </body> </html>
5th Apr 2020, 3:24 PM
Sidepocket
Sidepocket - avatar
0
And JS.... var numberOfDrumButtons = document.querySelectorAll(".drum").length; for (var i = 0,i < document.numberOfDrumButtons,i++){ } document.querySelector("button").addEventListener("click",function(){ alert("I got clicked"); });
5th Apr 2020, 3:26 PM
Sidepocket
Sidepocket - avatar
0
Yeah I got it no EmmanueLZ. Thanks bro.
6th Apr 2020, 12:58 PM
Sidepocket
Sidepocket - avatar
0
The error may because of Your declaration in next the calling event. Try declare the function first.
7th Apr 2020, 6:14 AM
Bharathikannan Ramakrishnan
Bharathikannan Ramakrishnan - avatar
- 1
i encounter same problem few days back...here is the solution.........just move your js link in your index page ...move it to the extreme end before the closing body tag.
7th Apr 2020, 12:37 AM
Ogunsolu qudus
Ogunsolu qudus - avatar