.getElementByID 问题（链接 html & js）

Question

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

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

Answer 1

我们缺少很多信息来帮助您。它看起来也像是某种作业——如果是这样，我建议你向你的教授寻求帮助。我可能是错的，所以无论如何我都会尽力帮助你：

我将假设您 post 在 < /html > 标记下方编辑的 javascript 是您的“clock.js”文件。我假设您已正确放置所有内容。但在我们解决您的问题之前，您必须先查看右括号中的元素并确保一切 paired/matching 正确。

值得注意的是，你有 < div class="爸爸" > 这没有被关闭。这意味着下面的所有内容现在都是 div 的一部分，并且可能无法正确呈现或被 DOM 读取。关闭 div，对其进行测试，然后 post 向我们反馈一个更彻底的问题 :) 祝你好运

Answer 2

首先您尝试使用 document.getElementById 但您没有设置任何 ID，因此您的 html 代码应该类似于

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

其次，在您的 javascript 方法中，该方法已定义但从未被调用，并且在 new 和 Date() 之间还需要一个 space；所以你的 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 文件都在同一文件夹或目录中

.getElementByID 问题（链接 html & js）

Issue with .getElementByID (linking html & js)

html

javascript

innerhtml

getelementbyid