How do I effectively link javascript to html?
Question
I am trying to link a javascript file to my html that will display a digital clock
I've checked online and used the script tag as it was said but the changes don't show on my web page, I need help please
html
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" charset=>
<title>About Me</title>
<link href=".\main.css" type="text/css" rel="stylesheet">
<script src="script.js"></script>
</head>
java script
function updateClock(){
var currentTime = new Date();
var currentHours = currentTime.getHours();
var currentMinutes = currentTime.getMinutes();
var currentSeconds = currentTime.getSeconds();
currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes;
currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds;
var timeOfDay = (currentHours < 12) ? "AM" : "PM";
currentHours = (currentHours > 12) ? currentHours - 12 : currentHours;
currentHours = (currentHours == 0) ? 12 : currentHours;
var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + ":" + timeOfDay;
document.getElementById('clock').innerHTML = currentTimeString;
};
//windows.onload=init;
2 answers
solution1
4 2019-07-11 21:56:18
In your HTML, try to put onLoad="updateClock()" in the body tag or a container tag to call your clock method from JS.
Like this,
<div onLoad="updateClock()" class="clock"></div>
OR
<body onLoad="updateClock()">
....
</body>
This can be done with any tag.
Full example here:
https://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock
solution2
0 ACCPTED 2019-07-11 22:02:10
Quite a number of problems.
First, in your head, either set the charset value to something or get rid of it. The problem I'm referring to is <meta name="viewport" content="width=device-width, initial-scale=1" charset=> .
Second, the html needs to load before your javascript is called. To fix this, put your script at the bottom, right before your </body> tag or change your <body> to <body onload="updateClock()"> . If you do it the first way, make sure to call your function; otherwise, nothing will happen.
Finally, you need to add a div tag or something with the id "clock"; otherwise your document.getElementById('clock').innerHTML won't be able to do anything.
Total Summary:
function updateClock(){ var currentTime = new Date(); var currentHours = currentTime.getHours(); var currentMinutes = currentTime.getMinutes(); var currentSeconds = currentTime.getSeconds(); currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes; currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds; var timeOfDay = (currentHours < 12) ? "AM" : "PM"; currentHours = (currentHours > 12) ? currentHours - 12 : currentHours; currentHours = (currentHours == 0) ? 12 : currentHours; var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + ":" + timeOfDay; document.getElementById('clock').innerHTML = currentTimeString; };
<head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>About Me</title> </head> <body onload="updateClock()"> <div id="clock"></div> </body>
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.