0

So I'm attempting to build a completely dynamic calender web-app, simply for some practice, but I'm struggling to dynamically replace this H1 elements text.

I've applied all months to the creatively named "month" variable, and is outputting correctly, but I can't seem to replace my placeholder 

<h1 id="replace">Month</h1>

using 

    function title(){
    var myReplace = document.getElementById("replace");
    myReplace.innerHTML = month;
    }
joshuaArmstrong
  • 1
  • 1
  • 3

1 Answers1

5

There's nothing syntactically incorrect with your code. You're most likely executing it at the wrong time. Try running on DOMContentLoaded or some other event that's more appropriate.

document.addEventListener('DOMContentLoaded', title);

Browsers render pages of HTML top-down. Retrieving and executing scripts as they're encountered, unless stated otherwise (async attribute). All the while, events are being triggered and any handlers to those events are subsequently executed.

DOMContentLoaded is one of those events that are triggered, specifically after the content has loaded. This is usually a good time to execute scripts as you're safe to manipulate the DOM as all of it's content has loaded. When you execute your scripts depends on the use-case/scenario.

Mozilla's has a good reference on many of the subscribe-able events.

Alex
  • 34,899
  • 5
  • 77
  • 90
  • 2
    I use window.onload - why the cumbersome event listener? – mplungjan Aug 10 '14 at 04:55
  • Yeah, [their updated comment](http://stackoverflow.com/questions/25225611/need-to-replace-the-text-within-a-h1-tag-dynamically?noredirect=1#comment39292147_25225611) seems to indicate they're executing it before the DOM has been created. – Qix - MONICA WAS MISTREATED Aug 10 '14 at 04:55
  • Great! Thank you very much, this fixed it! I'm rather new to JS, could you please explain what's actually happening/when this should be used? – joshuaArmstrong Aug 10 '14 at 04:56
  • 1
    how is it cumbersome to add the event listener. What is the negative impact @mplungjan any source? Firefox MDN examples usually show using DOMContentLoaded as far as I have seen – Scott Mitchell Aug 10 '14 at 05:01
  • @mplungjan no preference, usage will vary based on the specific scenario ... http://stackoverflow.com/questions/2414750/difference-between-domcontentloaded-and-load-events – Alex Aug 10 '14 at 05:08
  • window.onload is shorter, more readable, understandable and works in all browsers since beginning of dawn. addEventListener does not run in older IEs and have to have its own event listener code – mplungjan Aug 10 '14 at 05:09
  • Yes but they are "checking" 2 different things? window.onload is after the whole page has loaded not just when the dom is ready. – Scott Mitchell Aug 10 '14 at 05:11
  • I have never since 1996 needed the difference. If I need the difference, the code can be placed before the `

    `

     – mplungjan Aug 10 '14 at 05:12
  • 1
    Thats fine but if you are talking about "proper" usage I think it would be false to advertise that it preferred solution. Considering DOMContentLoaded is for when the DOM is ready. Not saying that you will run into problems. Of course if you need to support browsers < IE9 then yes you could go your route or whatever suits your needs – Scott Mitchell Aug 10 '14 at 05:14