Issue with .getElementByID (linking html & js)
Question
I'm a month into coding, so still pretty new. I'm currently having an issue linking my js file to my html file. Because of this issue, my javascript isn't showing in the browser. I'm not sure what the issue is (is it with document.getElementById('clock')? Should I add innerHTML)? if anyone could help me figure out how to link these files, that would be great. Thanks so much!
<html>
<head>
<link href="clock.css" type="text/css" rel="stylesheet"></link>
<title>TIME Time!</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
</head>
<body class="mainbod">
<p class="tagline">Time for the time!</p>
<div class="zaddy">
<div class="clock">clock goes here</div>
<script src="clock.js"></script>
</body>
</html>`
var morning = 6;
var noon = 12;
var evening = 17;
var night = 20;
var showCurrentTime = function() {
var clock = document.getElementById('clock');
var currentTime = newDate();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
var meridian = "AM";
if (hours >= noon) {
meridian = "PM";
}
if (hours > noon) {
hours = noon - 12;
}
if (minutes > 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
var clockTime = hours + " : " + minutes + " : " + seconds + " " + meridian;
clock.innerText = clockTime;
}
2 answers
solution1
1 ACCPTED 2021-01-19 01:10:21
First you are trying to use document.getElementById but you don't have any id set, so your html code should look like
<div id="clock">clock goes here</div>
Second, in your javascript methods, the method is defined but never called, also there is a space required between new and Date(); so your js file should look like
var morning = 6;
var noon = 12;
var evening = 17;
var night = 20;
showCurrentTime = function() {
var clock = document.getElementById('clock');
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
var meridian = "AM";
if (hours >= noon) {
meridian = "PM";
}
if (hours > noon) {
hours = noon - 12;
}
if (minutes > 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
var clockTime = hours + " : " + minutes + " : " + seconds + " " + meridian;
clock.innerText = clockTime;
}
showCurrentTime();
if you can't load your js file, make sure that your html and js file are both in same folder or directory
solution2
0 2021-01-19 00:57:59
There is a lot of information missing for us to help you. It looks like some kind of assignment, as well - if it is, I recommend you just asking your professor for help. I might be wrong so I'll try to help you out anyways:
I am going to assume the javascript you posted below the end < /html > tag is your "clock.js" file. I'll assume you have put everything correctly. But before we even troubleshoot your issues too far, you have to look at your elements closing brackets first and ensure everything is paired/matching up correctly.
Notably, you have < div class="daddy" > which is not being closed. That means everything underneath is now part of that div and probably not going to render or be read by the DOM correctly. Close the div, test it, and post back to us with a more thorough question:) Good luck
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.