why is this js statement showing error?? | Sololearn: Learn to code for FREE!
Novo curso! Todo programador deveria aprender IA generativa!
Experimente uma aula grƔtis
+ 2

why is this js statement showing error??

https://code.sololearn.com/W9qSVfQOaqEh/?ref=app

20th Dec 2022, 4:39 PM
Ashish Raj
Ashish Raj - avatar
6 Respostas
+ 2
Code we type in js tab on sololearn is loaded before html, so your elements don't exist jet, thats why we can't select them. Solution is to wait html page to load and then run js code, you can use code JayakrishnašŸ‡®šŸ‡³ posted to do this. If you have more selectors use next syntax onload = () => { // your js code }
20th Dec 2022, 6:54 PM
PanicS
PanicS - avatar
+ 3
onload= ()=> document.querySelector("button").style.backgroundColor="yellow";
20th Dec 2022, 5:52 PM
Jayakrishna šŸ‡®šŸ‡³
+ 3
It's in Sololearn loading issue. First if it loads JS file , then it may show html file ("button" ) element not found so returns null. So solution is to fetch elements onload with js file.
20th Dec 2022, 7:17 PM
Jayakrishna šŸ‡®šŸ‡³
+ 3
JayakrishnašŸ‡®šŸ‡³ and PanicS Thanks for the answers. Much appreciated šŸ‘
20th Dec 2022, 7:36 PM
Ashish Raj
Ashish Raj - avatar
+ 1
PanicS But on an iPad my code works but not on mobile phone
20th Dec 2022, 7:01 PM
Ashish Raj
Ashish Raj - avatar
0
<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8"> <title>Drum Kit</title> <link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet"> <style> .set{ text-align:center; } .drum{ font-family: 'Arvo', serif; font-size:25px ; margin: 20px; padding: 10px; border-radius: 10px; border: 2px solid #ffa000; background-color: #ffa000; color: #ffffff; box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75); transition: all 0.3s; } .drum:hover{ background-color: #ffffff; color: #ffa000; box-shadow: 0px 0px 5px 0px rgba(
22nd Dec 2022, 1:04 PM
Jhon Madrin
Jhon Madrin - avatar