Question

我正在尝试根据时间向我的网站添加文字。但是，我无法让它发挥作用！

HTML：

<!doctype>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<script link="index.js"></script>
</head>
<body>

<div id="header">
    <img id="bannerImage" src="banner.jpg" align="middle"></img>
</div id="header">
<section id="master">

<div id="navigation">
    <ul>
        <li class="navObject">About Me</li>
        <li class="navObject">Products</li>
        <li class="navObject">Contact</li>  
        <li class="navObject">FAQ</li>
    </ul>
</div>
<div>
<h3 id="welcomeText"></h3>
</div>
</section>
</body>
</html>

JS：

 var timeAdd = function(){
                        var today = new Date();
                        var todayHour = today.getHours();
                        var message;

                        switch(todayHour){
                            case(todayHour > 18):
                                message = "Good Evening!";
                                break;
                            case(todayHour > 12):
                                message = "Good Afternoon!";
                                break;
                            case(todayHour > 0):
                                message = "Good Morning!";
                                break;
                            default:
                                message = "Welcome!";
                                break;
                            }
                            return message;
                            };
var tag = document.getElementById("welcomeText");
tag.textContent(timeAdd());

我只是希望能够将消息添加到所述div中。当我尝试页面时，没有任何内容出现。我尝试过不同的方式，所以，我错过了什么？

Answer 1

你的作业是错误的 - 应该按照以下方式完成：

tag.textContent = timeAdd();

更好的支持却有innerHTML。您可以像textContent一样使用它。

tag.innerHTML = timeAdd();

此外，您切换不起作用。您必须使用switch(true)才能使其正常工作。就个人而言，我宁愿选择if else对我来说更清洁：

if (todayHour > 18){
   message = "Good Evening!";
} else if (todayHour > 12){
   message = "Good Afternoon!";
} else if (todayHour > 0){
   message = "Good Morning!";
} else {
   message = "Welcome!";
}

编辑：此外，您必须关心脚本执行的顺序。通常，您可以将index.js包含在头部，但是这一部分：

var tag = document.getElementById("welcomeText");
tag.textContent =timeAdd();

在您的标记中引入<h3 id="welcomeText"></h3> 后，必须执行

。所以你要么在那个元素之后调用index.js，要么之后只执行这两行：

<h3 id="welcomeText"></h3> <script src="index.js"></script>

或

<script src="index.js"></script>  <h3 id="welcomeText"></h3> <script> var tag = document.getElementById("welcomeText"); tag.textContent =timeAdd(); </script>

Answer 2

而是设置innerHtml属性，text或html

tag.innerHTML = timeAdd()

Answer 3

textContent是属性，而不是方法此外，如果您首先使用布尔个案匹配，则应使用true作为切换参数

试试这个：

var timeAdd = function(){
  var today = new Date();
  var todayHour = today.getHours();
  var message;
  switch(true){
    case(todayHour > 18):
      message = "Good Evening!";
      break;
    case(todayHour > 12):
      message = "Good Afternoon!";
      break;
    case(todayHour > 0):
      message = "Good Morning!";
      break;
    default:
      message = "Welcome!";
      break;
  }
  return message;
};

var tag = document.getElementById("welcomeText");
tag.textContent = timeAdd();

Answer 4

这里有一些问题。首先，从结束div标签中删除id="header";这是无效的HTML。

其次，switch语句不像你想象的那样工作。使用它作为timeAdd函数（该名称也没有意义，可能getTimeGreeting代替：

var timeAdd = function() {
    var today = new Date();
    var todayHour = today.getHours();
    var message = 'Welcome!';

    if (todayHour >= 18) {
        message = 'Good Evening!';
    } else if (todayHour >= 12) {
        message = 'Good Afternoon!';
    } else if (todayHour >= 0) {
        message = 'Good Morning!';
    }

    return message;
};

最后，将设置行更改为tag.innerText = timeAdd();

我的Date（）JavaScript函数不起作用？

4 个答案: