+ 2

why is this js statement showing error??

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

20th Dec 2022, 4:39 PM

Ashish Raj

6 Answers

+ 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

+ 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

+ 1

PanicS But on an iPad my code works but not on mobile phone

20th Dec 2022, 7:01 PM

Ashish Raj

<!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