Trying to write a function to display the time in a 12 hour format but the HTML is not displaying the time and the function returns null

Question

我有一個任務，我們必須通過 js 文件中的 function 以 12 小時格式插入時間。 我寫了 function 但 HTML 沒有撿起它， function 返回 Z37A6259CC0C1DAE02 值。

如果我在 HTML 文件中的腳本標簽之間布局 function ，它將返回時間很好，但我需要為分配設置樣式，並且它必須位於單獨的 js 文件中。

/*here is the js file*/
"use strict";
var $ = function(id) { return document.getElementById(id); };

var displayCurrentTime = function() {
     //GET CURRENT DATE-TIME
  var currentTime = new Date ();

  //GET THE CURRENT TIME
  var hours = currentTime.getHours ();
  var minutes = currentTime.getMinutes ();
  var seconds = currentTime.getSeconds ();

  //APPEND A ZERO(0) IF MINUTES OR SECONDS ARE LESS THAN 10
  minutes = ( minutes < 10 ? "0" : "" ) + minutes;
  seconds = ( seconds < 10 ? "0" : "" ) + seconds;

  //CHOOSE AM IF HOUR IS LESS THAN 12 AND PM IF HOUR IS BIGGER THAN 12
  var ampm = ( hours < 12 ) ? "AM" : "PM";

  //CHANGE TO 12 HOUR FORMAT BY SUBTRACTING 12 IF HOUR IS BIGGER THAN 12.
  hours = ( hours > 12 ) ? hours - 12 : hours;

  //CHANGE HOUR OF 0 (MIDNIGHT) TO 12.
  hours = ( hours == 0 ) ? 12 : hours;

  //CREATE STRING OF TIME
  var currentTimeString = hours + ":" + minutes + ":" + seconds + " " + ampm;

  //DISPLAY TIME IN DIV
  document.getElementById("clock").firstChild.nodeValue = currentTimeString;
}
var displayCurrentTime = $("minutes");
console.log(displayCurrentTime);

var padSingleDigit = function(num) {
    if (num < 10) { return "0" + num; }
    else { return num; }
};

window.onload = function() {
    // set initial clock display and then set interval timer to display
    // new time every second. Don't store timer object because it 
    // won't be needed - clock will just run.
    displayCurrentTime(setInterval(1000));
};

HTML文件中有4個span id（小時、分鍾、秒和ampm）需要填寫。

這是 index.html 文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">  
    <title>Clock</title>
    <link rel="stylesheet" href="clock.css">
    <script src="clock.js"></script>
</head>
<body>
    <main>
        <h1>Digital clock</h1>
        <fieldset>
            <legend>Clock</legend>
            <span id="hours">&nbsp;</span>:
            <span id="minutes">&nbsp;</span>:
            <span id="seconds">&nbsp;</span>&nbsp;
            <span id="ampm">&nbsp;</span>
        </fieldset>
    </main>
</body>
</html>

Answer 1

我發現有一些問題會讓你絆倒

1）您將 function 定義為displayCurrentTime （有效），然后用var displayCurrentTime = $("minutes")行完全覆蓋它。 因此，您將檢索一個元素，而不是調用 function -您的 console.log() 緊隨其后，這就是您看到 null 值的原因

2）您說“HTML 文件（小時、分鍾、秒和 ampm）中需要填寫的 4 個跨度 id”但您的腳本只返回所有這些字段，將它們連接在一起 - 這對您沒有幫助，但您可以function 中已有所有正確的值

var displayCurrentTime = function() {
  var currentTime = new Date ();

  var hours = currentTime.getHours();
  var minutes = currentTime.getMinutes();
  var seconds = currentTime.getSeconds();

  minutes = ( minutes < 10 ? "0" : "" ) + minutes;
  seconds = ( seconds < 10 ? "0" : "" ) + seconds;

  var ampm = ( hours < 12 ) ? "AM" : "PM";

  hours = ( hours > 12 ) ? hours - 12 : hours;
  hours = ( hours == 0 ) ? 12 : hours;

  // At this point, all 4 values are ready to drop into your span tags
  $('hours').textContent = hours;
  $('minutes').textContent = minutes;
  $('seconds').textContent = seconds;
  $('ampm').textContent = ampm;
}

3）你的 setInterval 被稱為錯誤，它應該像

window.onload = function() {
    setInterval(displayCurrentTime, 1000);
};

這是具有這些更改的代碼筆

Trying to write a function to display the time in a 12 hour format but the HTML is not displaying the time and the function returns null

問題描述

1 個解決方案

解決方案1
0 已采納 2019-10-21 00:23:02

Trying to write a function to display the time in a 12 hour format but the HTML is not displaying the time and the function returns null

問題描述

1 個解決方案

解決方案1 0 已采納 2019-10-21 00:23:02

解決方案1
0 已采納 2019-10-21 00:23:02