How to make this JavaScript execute upon loading

Question

I have tried implementing onload into the containing div, and a lot of the code works fine when I execute individual pieces, but for some reason it will not load in its entirety even in jsfiddle:

https://jsfiddle.net/wf6gdr7z/1/

I still have a lot more to add to the code, I am more concerned with it executing so I can continue testing it and adding functionality. I have a feeling I am missing something really basic. :)

HTML

<div onload="businessYearlyHours()">

    <h1>Business Hours</h1>
    <p id="businessStatus"></p>
    <p id="businessHours"></p>
    <p id="otherNotes"></p>
    <p>Only Service Animals are allowed in the business</p>

    <p><a href="">Click here to see full hours for the year</a></p>

</div>

JAVASCRIPT

function businessYearlyHours() {

var d = new Date();
var month = d.getMonth() + 1;
var day = d.getDate();
var hours = d.getHours();
var minutes = d.getMinutes();
var busHours;
var status;    

if (month == 1 || month == 2 || month == 3){    // Jan 1 - Mar 31 Hours

    busHours = "Jan 2-Mar 31: 9AM-5PM"; 
    document.getElementById("businessHours").innerHTML = busHours;

    if(month == 1 && day == 1){
        otherNotes = "Closed Thanksgiving Day and Dec 24-Jan 1";
        document.getElementById("otherNotes").innerHTML = otherNotes; // Display these additional notes on January 1st only

    }

        if (hours >= 9 && hours < 17){
            status = "The Business is Open";        // Consider making this status bold for each entry
            document.getElementByID("businessStatus").innerHTML = status;

        }

        else {
            status = "The Business is Closed";  // Consider making this status bold for each entry
            document.getElementByID("businessStatus").innerHTML = status;

        }

}

else if (month == 4){       // April 1-30 Hours

    busHours = "Apr 1-30: 9AM-7:30PM";
    document.getElementById("businessHours").innerHTML = busHours;

        if (hours >= 9 && (hours < 19 && minutes < 30)){
            status = "The Business is Open";        // Consider making this status bold for each entry
            document.getElementByID("businessStatus").innerHTML = status;

        }

        else {
            status = "The Business is Closed";  // Consider making this status bold for each entry
            document.getElementByID("businessStatus").innerHTML = status;

        }

}

else if (month == 5 || month == 6 || month == 7 || month == 8){     // May 1 - Aug 31 Hours

    busHours = "May 1-Aug 31: 9AM-9PM*"; 
    otherNotes = "*On days when events are scheduled, business hours are 9AM-5PM";
    document.getElementById("businessHours").innerHTML = busHours;
    document.getElementById("otherNotes").innerHTML = otherNotes;

        if (hours >= 9 && hours < 21){
            status = "The Business is Open";        // Consider making this status bold for each entry
            document.getElementByID("businessStatus").innerHTML = status;

        }

        else {
            status = "The Business is Closed";  // Consider making this status bold for each entry
            document.getElementByID("businessStatus").innerHTML = status;

        }

}

else if (month == 9) {  // Sep 1 - 30 Hours

    busHours = "Sep 1-30: 9AM-7:30PM*";
    otherNotes = "*On days when events are scheduled, business hours are 9AM-5PM";
    document.getElementById("businessHours").innerHTML = busHours;
    document.getElementById("otherNotes").innerHTML = otherNotes;

        if (hours >= 9 && (hours >= 9 && (hours < 19 && minutes < 30)){
            status = "The Business is Open";        // Consider making this status bold for each entry
            document.getElementByID("businessStatus").innerHTML = status;

        }

        else {
            status = "The Business is Closed";  // Consider making this status bold for each entry
            document.getElementByID("businessStatus").innerHTML = status;

        }

}

// Closed Thanksgiving Day / Christmas

else if ( month == 10 || month == 11 || month == 12) {      

    busHours = "Oct 1-Dec 23: 9AM-5PM";
    otherNotes = "Closed Thanksgiving Day and Dec 24-Jan 1"; 
    document.getElementById("businessHours").innerHTML = busHours;
    document.getElementById("otherNotes").innerHTML = otherNotes;

        if (hours >= 9 && hours < 17){
            status = "The Business is Open";        // Consider making this status bold for each entry
            document.getElementByID("businessStatus").innerHTML = status;

        }

        else {
            status = "The Business is Closed";  // Consider making this status bold for each entry
            document.getElementByID("businessStatus").innerHTML = status;

        }

}

else () {

    break;

}

}

There's a syntax error in the code. Keep the browser's JavaScript console open, you'll see the error messages there. — JJJ
– JJJ, Commented Sep 21, 2015 at 20:49
Thank you. I fixed two different syntax errors and Chrome's console shows no more errors. It still does not execute the code to fill in the <p> sections. — Adam West
– Adam West, Commented Sep 21, 2015 at 21:01
Do you call your function explicitly somewhere? The question not contains that part. — SalDev
– SalDev, Commented Sep 21, 2015 at 21:07

Barmar · Accepted Answer · 2015-09-21 21:23:16Z

3

DIV elements don't trigger the load event. Use

<body onload="businessYearlyHours()">

instead. Or do it in Javascript entirely:

window.onload = businessYearlyHours;

answered Sep 21, 2015 at 21:23

Barmar

789k57 gold badges555 silver badges669 bronze badges

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

Comments

SalDev · Accepted Answer · 2015-09-21 21:09:37Z

1

Your A tag is not linking to your function. You should bind the handler function on the click event.

answered Sep 21, 2015 at 21:09

SalDev

3883 silver badges9 bronze badges

5 Comments

Barmar Over a year ago

That may be true, but it has nothing to do with the question.

SalDev Over a year ago

He's problem was that the function was not running, so it's related to the question.

Barmar Over a year ago

The function is supposed to run when the page is loaded, not when he clicks on something.

Barmar Over a year ago

Don't you see onload="businessYearlyHours()", which is what was supposed to link to the function?

SalDev Over a year ago

Ok, i didn't get that for the first time when i answered, i supposed that the A tag is for that

Collectives™ on Stack Overflow

How to make this JavaScript execute upon loading

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related