.getElementByID 問題（鏈接 html 和 js）

Question

我已經編碼一個月了，所以還是很新的。 我目前在將我的 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;
}

Answer 1

首先，您嘗試使用 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 文件都在同一個文件夾或目錄中

Answer 2

我們缺少很多信息來幫助您。 它看起來也像是某種作業——如果是的話，我建議你向你的教授尋求幫助。 我可能是錯的，所以無論如何我都會盡力幫助你：

我將假設您在結束 </html> 標簽下方發布的 javascript 是您的“clock.js”文件。 我假設你把所有的東西都放對了。 但在我們甚至對您的問題進行過多的故障排除之前，您必須先查看您的元素右括號，並確保所有內容都正確配對/匹配。

值得注意的是，您的 < div class="daddy" > 沒有被關閉。 這意味着下面的所有內容現在都是該 div 的一部分，並且可能無法正確呈現或被 DOM 讀取。 關閉 div，測試它，然后用更徹底的問題回復我們:) 祝你好運

.getElementByID 問題（鏈接 html 和 js）

問題描述

2 個解決方案

解決方案1
1 已采納 2021-01-19 01:10:21

解決方案2
0 2021-01-19 00:57:59

.getElementByID 問題（鏈接 html 和 js）

問題描述

2 個解決方案

解決方案1 1 已采納 2021-01-19 01:10:21

解決方案2 0 2021-01-19 00:57:59

解決方案1
1 已采納 2021-01-19 01:10:21

解決方案2
0 2021-01-19 00:57:59