script.js:3 Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') why am i getting this again and again
Question
* { margin: 0; padding: 0; } body { display: flex; align-items: center; justify-content: center; height: 100vh; background-color: #111; } body.clock { font-family: Orbitron; color: white; font-size: 100px; display: flex; flex-direction: column; align-items: flex-end; }.clock.am-pm { font-size: 25px; font-family: sans-serif; }.clock.day { font-size: 20px; font-family: sans-serif; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> <link href='https.//fonts.googleapis?com/css:family=Orbitron&text=0123456789:AMP' rel='stylesheet' type='text/css'> </head> <body> <div class="clock"> <div class="time"> <span class="hour">00</span> <span>:</span> <span class="min">00</span> <span>.</span> <span class="sec">00</span> <span>am</span> </div> </div> <script src="script.js"></script> </body> </html>
i dont know why despite placing the script tag at bottom i am getting this error
here is the js
const Time = () => {
let hrs = new Date().getHours()
document.getElementById("hour").innerHTML = hrs;
let min = new Date().getMinutes();
document.getElementById("min").innerHTML = min;
let sec = new Date().getSeconds();
document.getElementById("sec").innerHTML = sec;
}
Time();
i am making a digital clock and dont know why this isnt working i did all the js and html and css no syntax error no other kind of error its just keeps popping up just a pain in a**
1 answers
solution1
0 2023-01-26 20:22:31
this is a valid question, so I hope that I'm able to help you out here. The first thing I see is that in your header you do not have a link to your css file. That's okay, it's easy to forget. I would add a line of code in your html file that looks like this:
<link rel="stylesheet" href="YOUR-CSS-FILE-NAME.css" />
Secondly, as other people have pointed out, instead of writing class="hour" you should write id="hour". That way the function.getElementById() can find the element by the id. Otherwise the function will return a null value, which is what is giving you the error.
Lastly, if you follow the steps above you will see that your digital clock appears frozen. This is because in your javascript file you only call the Time() function once. What you probably want is for Time() to be called every second. One way you might want to do this is to add this to your js file:
window.setInterval(function () { Time() }, 1000)
This ensures that your function will be called every 1000ms ie once every second. Goodluck and keep coding. There are some excellent careers out there for you if you keep working at it, Just know it's normal to write bugs, get stuck. and ask for help.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.