时间戳

首页 > 解决方案 > .getElementByID 问题（链接 html 和 js）

javascript - .getElementByID 问题（链接 html 和 js）

问题描述

我已经编码一个月了，所以还是很新的。我目前在将我的 js 文件链接到我的 html 文件时遇到问题。由于这个问题，我的 javascript 没有显示在浏览器中。我不确定问题是什么（是 document.getElementById('clock') 吗？我应该添加 innerHTML）吗？如果有人可以帮助我弄清楚如何链接这些文件，那就太好了。非常感谢！

<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;
}

标签： javascripthtmlinnerhtmlgetelementbyid

解决方案

首先，您尝试使用 document.getElementById 但您没有设置任何 id ，因此您的 html 代码应如下所示

<div id="clock">clock goes here</div>

其次，在您的 javascript 方法中，该方法已定义但从未调用，并且 new 和 Date() 之间也需要一个空格；所以你的 js 文件应该看起来像

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();

如果您无法加载您的 js 文件，请确保您的 html 和 js 文件都在同一个文件夹或目录中

推荐阅读