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

I have an assignment where we have to plugin the time in a 12 hour format through a function in a js file.我有一个任务，我们必须通过 js 文件中的 function 以 12 小时格式插入时间。 I have the function written but the HTML is not picking it up and the function is returning a null value.我写了 function 但 HTML 没有捡起它， function 返回 Z37A6259CC0C1DAE02 值。

If I layout the function between script tags in the HTML file it will return the time fine but I need it to be styled for the assignment and also it has to be in a separate js file.如果我在 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));
};

There are 4 span ids in the HTML file (hours, minutes, seconds, and ampm) that need to be filled. HTML文件中有4个span id（小时、分钟、秒和ampm）需要填写。

Here is the index.html file:这是 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

There's a few issues that I see that would be tripping you up我发现有一些问题会让你绊倒

1) You defined your function as displayCurrentTime (which works), but then overwrite it completly with the line var displayCurrentTime = $("minutes") . 1）您将 function 定义为displayCurrentTime （有效），然后用var displayCurrentTime = $("minutes")行完全覆盖它。 So, instead of calling a function, you're going to retrieve an element - Your console.log() is right after, so that's why you're seeing a null value因此，您将检索一个元素，而不是调用 function -您的 console.log() 紧随其后，这就是您看到 null 值的原因

2) You say "4 span ids in the HTML file (hours, minutes, seconds, and ampm) that need to be filled" but your script just returns all of those fields, joined together - that's not helpful to you, but you do have all the correct values already in the function 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) Your setInterval is being called wrong, it should be like 3）你的 setInterval 被称为错误，它应该像

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

Here is the codepen with these changes这是具有这些更改的代码笔

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