我一直在尝试用 javascript 制作时钟，但有时它显示为未定义答案

【问题标题】：i have been trying to make a clock in javascript but sometimes it shows up as undefined我一直在尝试用 javascript 制作时钟，但有时它显示为未定义
【发布时间】：2014-01-22 08:50:03
【问题描述】：

最初的 js 可以工作，但是在测试它时，我多次未定义提示，但时间仍然出现，但在多次将提示留空后，领带显示未定义，基本上一切都在获取问候只会把你作为未定义的 html 来，这很奇怪，因为它之前已经工作过

window.onload = function () {
    document.getElementById("time").innerHTML = getGreeting();
    document.getElementById("welc").innerHTML = open();

};

var count = setInterval(function () {
    getGreeting()
}, 1000);

function getGreeting() {
    var dateNow = new Date();
    var time = dateNow.toTimeString();
    var hours = time.substring(0, 2);
    var today = dateNow.toDateString();
    var now = dateNow.toLocaleTimeString();
    var clock = document.getElementById("time");
    //var numhours = hours.parseInt();
    if (hours >= 12 && hours < 18) {
        return
        clock.textContent = "Good Afternoon, Welcome Time:" + today + " " + now;
        clock.innerText = "Good Afternoon, Welcome Time:" + today + " " + now;
    } else if (hours >= 18 && hours <= 23) {
        return
        clock.textContent = "Good Evening, Welcome Time : " + today + " " + now;
        clock.innerText = "Good Evening, Welcome Time : " + today + " " + now;
    } else if (hours >= 0 && hours < 12) {
        return
        clock.textContent = "Good Morning, Welcome Time:" + today + " " + now;
        clock.innerText = "Good Morning, Welcome Time:" + today + " " + now;
    }

}

function open() {
    var name = prompt("Hello User. What is your name?");
    if (name === '') {
        return "Hello User";
    } else if (name) {
        return "Hello " + name + "!";
    }
}

html 这里所有的都是一个带有子菜单的菜单和一个网页的基本轮廓我不认为 html 会出现问题

<DOCTYPE! html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="final.css">
<script type ="text/javascript"  src="final.js"></script>
<title>Final HTML/CSS Project-History of Major Tech Companies</title>
</head>
<body>
<div id="header">
<h1>Home<h1>
</div>
<div id="nav">
<nav>
<ul>
    <li><a href="#">ppgphb</a>
        <ul>
            <li><a href="#">ppgphb</a>
                <ul>
                    <li><a href="#">ppgphb</a></li>
                    <li><a href="#">myymmy</a></li>
                    <li><a href="#">ymymmy</a></li>
                    <li><a href="#">ymmyym</a></li>
                    <li><a href="#">ymmy</a></li>
                    <li><a href="#">mymyym</a></li>
                </ul>
            </li>

            <li><a href="#">myymmy</a></li>
            <li><a href="#">ymymmy</a></li>
            <li><a href="#">ymmyym</a></li>
            <li><a href="#" >ymmy</a></li>
            <li><a href="#">mymyym</a></li>
        </ul>
    </li>

    <li><a href="#" >myymmy</a></li>
    <li><a href="#">ymymmy</a></li>
    <li><a href="#">ymmyym</a></li>
    <li><a href="#">ymmy</a></li>
    <li><a href="#">mymyym</a></li>
</ul>
</nav>
</div>
<div id="content">
</div>
<div id ="footer"> <p id = "welc"></p><p id = "time"></p></div>
</body>


</html>

这里的css是css，它确实与问题无关，但我只是添加了incase

     body{
background-color:#DED4FF;
 }
 nav{
 margin-right:25px;
  }
 nav ul{

list-style-type:none;
position:relative;
display:inline;
 }
 nav ul li{

 position:relative;
 border:1px ouset #3B315C;
 color:#DED4FF;
 -color:#52447F;
 text-align:center;
 margin:5px;
 width:125px;
 padding:5px;
 margin-bottom:25px;
 box-shadow:0 1px 7px #CAC1E8;
 }
 nav li:visited{

 }
 nav ul ul{
 border:1px solid black;
 margin-bottom:15px;
 margin-left:1px;
 position:absolute;
 transition:display 8s;
 transition:display 8s;
 display:none;
 }
 nav ul li a{ 
 color:#DED4FF;
 text-decoration:none;
 display:block;
 }
 nav ul ul li a{
  transition:8s;
 }
}
nav ul ul li{
border:1px ouset #715FB5;
background-color:#A388FF;
margin:0px;
margin-left:90px;
box-shadow:0 1px 7px #413D63;
}
nav ul ul li a{
color:#6F6A7F;
}
nav ul ul ul li {

box-shadow:0 1px 7px ;
border:1px ouset #52447F;
background-color:#826DCC;
}
nav ul ul ul li a{
color:#52447F;
}
nav ul ul ul{
margin-right:18px;
float:none;
position:absolute;
transition:display 8s;
}
nav ul:after{
content:"";
clear:both;
display:block;
}
nav ul li:hover>ul{
display:block;
}
#header,#nav,#footer,#content{
height:100px;
}
#nav{
 border-right:1px solid black;
 text-align:center;
 width:145px;
 height:500px;
 float:left;
 }
 #content{
  float:right;
  }
  #footer{
   border-top:1px solid black;
    clear:both;
     }
    #header{
     border-bottom:1px solid black;
    border-top:1px solid black;
    }

【问题讨论】：

最好使用jsFiddle 之类的东西来处理像这样的非常长的多文件示例。
不需要所有的 HTML 和 CSS，OP 应该发布一个显示问题的 minimal 测试用例。通常在开发测试用例时，问题会变得清晰，不需要发布。
问题出在js文件中
@user2888333 — 请注意，您调用的 Date 方法依赖于实现，将它们解析为好像它们在每个浏览器中完全相同，并且对于每个可能的用户首选项设置都不是一个好主意（例如 toDateString与几乎任何其他设置相比，美国设置几乎肯定会产生不同的结果。

标签： javascript html css clock

【解决方案1】：

在代码所处的状态下，除非您最近添加了返回，否则它不可能工作。 if 语句中的返回使代码短路。

if (hours >= 12 && hours < 18) {
    return  <-- anything after return will not run...

因为你没有返回任何东西，它会返回未定义的，而不是推入innerHTML。您应该返回文本。

if (hours >= 12 && hours < 18) {
    return "Good Afternoon, Welcome Time:" + today + " " + now;
}

【讨论】：

哇真的，但它以前为其他只有欢迎信息的项目做到了

【解决方案2】：

时钟根本不应该工作。在：

if (hours >= 12 && hours < 18) {
    return
    clock.textContent = "Good Afternoon, Welcome Time:" + today + " " + now;
    clock.innerText = "Good Afternoon, Welcome Time:" + today + " " + now;

自动分号插入会在return之后插入一个分号，所以函数返回undefined并且不执行以下两条语句。你应该有类似的东西：

var clockString;
...
if (hours >= 12 && hours < 18) {
   clockString =  "Good Afternoon, Welcome Time:" + today + " " + now;
} else if (...) {
   ...
}

if (typeof clock.textContent == 'string') {
  clock.textContent = clockString;
} else if (typeof clock.innerText == 'string') {
  clock.innerText = clockString;
} else {
  clock.innerHTML == clockString
}

【讨论】：

你的代码底部我不确定你可以解释它的原因
将字符串的创建与分配为元素内容分开（这确实应该是一个单独的函数），并修复（不必要的）返回语句。