A function inside of the h1 tag?

Question

I want to insert my function inside of the h1 tag so it will address the user a greeting depending on the time of day. This is my time function but how do I implement it into h1?

var today = new Date();
var curHr = today.getHours();
function greeting() {
if ( curHr < 12) {
    document.write('Good Morning');
} else if ( curHr < 18) {
    document.write('Good Afternoon');
} else if ( curHr < 20) {
    document.write('Good Evening')
} else {
    document.write('Good Night');
}
}

http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice — Quentin, Oct 16 '16 at 16:41

adeneo · Answer 1 · 2016-10-16T16:48:35.650

You give your H1 an ID

<h1 id="goeshere">Message</h1>

You then replace document.write with something like

document.getElementById('goeshere').textContent = 'Good Morning'.

and do that for all the conditions.

You do not put the javascript inside the H1, and you do not use document.write, ever !

var today = new Date();
var curHr = today.getHours();
function greeting() {
    if ( curHr < 12) {
        document.getElementById('goeshere').textContent = 'Good Morning';
    } else if ( curHr < 18) {
        document.getElementById('goeshere').textContent = 'Good Afternoon';
    } else if ( curHr < 20) {
        document.getElementById('goeshere').textContent = 'Good Evening';
    } else {
        document.getElementById('goeshere').textContent = 'Good Night';
    }
}

greeting()

<h1 id="goeshere">Message</h1>

Ruslan Osmanov · Answer 2 · 2016-10-16T16:52:13.980

I think you're trying to write a function that is suppsoed to update the header tag.

You should fetch the date within the function (no need in globals). The function should return desired value (instead of document.write). And you should use the function as appropriate, for example:

function greeting() {
  var today = new Date();
  var curHr = today.getHours();
  if ( curHr < 12) {
    return 'Good Morning';
  } else if ( curHr < 18) {
    return 'Good Afternoon';
  } else if ( curHr < 20) {
    return 'Good Evening';
  } else {
    return 'Good Night';
  }
}

var h1 = document.getElementById('my-header');
// Check if such header actually exists
if (h1) {
  h1.innerHTML = greeting();
}

It is assumed that the code is executed somewhere after the h1 tag (the tag should be available when we access it), for example:

<h1 id="my-header">Default header</h1>
<!-- ... -->
<script>/* here */</script>

score 0 · Answer 3 · answered Oct 16 '16 at 16:40

0

You put a script that calls it there.

<h1><script>greeting()</script></h1>

answered Oct 16 '16 at 16:40

Quentin

800,325
104
1,079
1,205

manikant gautam · Answer 4 · 2016-10-16T17:12:52.157

0

you could try in such a way also

  var today = new Date();
  var curHr = today.getHours();
  function greeting() {
  if ( curHr < 12) {
  return 'Good Morning';
  } else if ( curHr < 18) {
  return  'Good Afternoon';
  } else if ( curHr < 20) {
  return  'Good Evening';
  } else {
  return 'Good Night';
  }
}
 var xyz= greeting()
 //alert(xyz)
 document.getElementById('yourElementId').textContent =xyz

have a look at here is working example.

edited Oct 16 '16 at 17:12

answered Oct 16 '16 at 16:43

manikant gautam

3,109
1
15
24

Just `return`ing something won't display it... And you're not even doing anything in the last 2 `if/else` statements – blex Oct 16 '16 at 16:43

A function inside of the h1 tag?

4 Answers4