.getElementByID的问题（链接html和js）

debugcn 发表于 Dev

尼迈·恩多洛（Nimay Ndolo）

我一个月要编码，所以还是很新。我目前在将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;
}

Lakshay bajaj

首先，您尝试使用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文件都位于同一文件夹或目录中

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。