My Date() JavaScript function is not working?

Question

I am trying to add text to my site based on the time. However, I cannot get it to work!

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());

I just want to be able to add the message to said div. When I try the page, nothing comes up. I have tried different ways, so, what am I missing?

@ColbyCox Before you post a question about JavaScript, try using Developer Tools console in your browser. In this case, it would have told you that the textContent property is not a function. — hon2a
– hon2a, Commented Dec 11, 2014 at 17:00
@ColbyCox You will also need to move your <script link="index.js"></script> tag before </body> since your JavaScript will be executed before the DOM is loaded. Also, <script src="index.js"></script> instead of <script link="..."></script> — Riley
– Riley, Commented Dec 11, 2014 at 17:05

Christoph · Accepted Answer · 2014-12-11 17:13:31Z

2

Your assignment is wrong - it should be done in the following way:

tag.textContent = timeAdd();

better support however has innerHTML. You can use it the same way like textContent.

tag.innerHTML = timeAdd();

Also, you switch does not work. You have to use switch(true), in order for it to work properly. Personally, I'd rather go with an if else which looks cleaner to me:

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

EDIT: Also, you have to care for the order of your script execution. Generally, you can include your index.js in the head, however this part:

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

has to be executed after you introduce <h3 id="welcomeText"></h3> in your markup. So either you call index.js after that element, or execute just these two lines afterwards:

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

or

<script src="index.js"></script> <!-- without the last two lines! -->
<h3 id="welcomeText"></h3>
<script>
    var tag = document.getElementById("welcomeText");
    tag.textContent =timeAdd();
</script>

edited Dec 11, 2014 at 17:13

answered Dec 11, 2014 at 16:58

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Christoph Over a year ago

@ColbyCox If all your problems are settled now you can mark your questions as solved to the SO community by accepting an answer as solution be ticking the checkmark right below the score.

vp_arth · Accepted Answer · 2014-12-11 17:06:36Z

0

textContent is a property, not a method.
Also if you use boolean cases to match first you should use true as switch argument

Try this:

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();

answered Dec 11, 2014 at 17:06

vp_arth

15k4 gold badges43 silver badges72 bronze badges

Comments

Oscar · Accepted Answer · 2014-12-11 17:09:27Z

0

Instead set the innerHtml property, text or html

tag.innerHTML = timeAdd()

edited Dec 11, 2014 at 17:09

answered Dec 11, 2014 at 16:57

Oscar

14.1k9 gold badges53 silver badges84 bronze badges

2 Comments

Christoph Over a year ago

where do you have that info from? Sure an h3 has the textContent property.

Christoph Over a year ago

So you should remove your answer then?

kiswa · Accepted Answer · 2014-12-11 17:10:58Z

0

There are a few issues here. First, remove the id="header" from the closing div tag; that is invalid HTML.

Second, the switch statement is not working the way you think it is. Use this as your timeAdd function instead (that name doesn't make sense either, maybe getTimeGreeting instead:

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;
};

Finally, change the setting line to tag.innerText = timeAdd();

answered Dec 11, 2014 at 17:10

kiswa

15.1k1 gold badge23 silver badges30 bronze badges

Collectives™ on Stack Overflow

My Date() JavaScript function is not working?

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related