innerHTML function in Javascript not working

Question

I am trying to make the text on the webpage update dynamically based on what day it is. But for some reason the text "OPEN Wednesday FROM 9 AM to 5:30 PM" isn't showing up. I am using XAMPP, but I don't think that matters. Her is my code.

        var hours = ["Closed", "Closed", "9 AM to 9 PM", "9 AM to 5:30 PM","9 AM to 9 PM", "9 AM to 5:30 PM", "9 AM to 2:30 PM"]; //Sunday -> Saturday
        var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; // Variable to Convert getDay() to text
        var dayOfWeek = getDay();

        document.getElementById("open").innerHTML = "OPEN " + days[dayOfWeek] + " FROM " + days[dayOfWeek];

and

<p id="open"></p>

And did you place the script after the element in the DOM, and what exactly is getDay() ? — adeneo
– adeneo, Commented Jan 8, 2015 at 2:12
getDay() = "Returns the day of the week (from 0-6)" And yes it is after the eleement — Brian Bishop
– Brian Bishop, Commented Jan 8, 2015 at 2:17
There is no getDay in javascript, other than the one attached to a date object, so I'm guessing you created that function yourself then ? — adeneo
– adeneo, Commented Jan 8, 2015 at 2:21

Dnyanesh · Accepted Answer · 2015-01-08 02:26:13Z

1

I think your were missing on few things

getDay() function always work on Date so first need to create date for it.
days[dayOfWeek] + " FROM " + days[dayOfWeek]; it should be like days and hours days[dayOfWeek] + " FROM " + hours[dayOfWeek];

Run the snippet for more details

 var hours = ["Closed", "Closed", "9 AM to 9 PM", "9 AM to 5:30 PM","9 AM to 9 PM", "9 AM to 5:30 PM", "9 AM to 2:30 PM"]; //Sunday -> Saturday
 
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; // Variable to Convert getDay() to text

 var d = new Date();
var dayOfWeek = d.getDay();

 document.getElementById("open").innerHTML = "OPEN " + days[dayOfWeek] + " FROM " + hours[dayOfWeek];

<p id="open"></p>

answered Jan 8, 2015 at 2:26

Dnyanesh

2,3633 gold badges20 silver badges17 bronze badges

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

Comments

Rakesh_Kumar · Accepted Answer · 2015-01-08 02:28:36Z

0

How you are defining getDay() function?

If not defined, use Date object:

var dayOfWeek = new Date().getDay();

http://jsfiddle.net/trestqwz/1/

 var hours = ["Closed", "Closed", "9 AM to 9 PM", "9 AM to 5:30 PM","9 AM to 9 PM", "9 AM to 5:30 PM", "9 AM to 2:30 PM"]; //Sunday -> Saturday
    var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; // Variable to Convert getDay() to text
    var dayOfWeek = new Date().getDay();

    document.getElementById("open").innerHTML = "OPEN " + days[dayOfWeek] + " FROM " + hours[dayOfWeek];

edited Jan 8, 2015 at 2:28

answered Jan 8, 2015 at 2:21

Rakesh_Kumar

1,4621 gold badge17 silver badges30 bronze badges

Comments

enhzflep · Accepted Answer · 2015-01-08 02:23:05Z

Further to the comment made by adeno, you need to either: a) Place the code in the document after the p element or b) Run the code after the document has loaded.

I'll present an example of the latter method.

<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}

function toggleClass(elem, className){elem.classList.toggle(className);}
function toggleClassById(targetElemId, className){byId(targetElemId).classList.toggle(className)}

function hasClass(elem, className){return elem.classList.contains(className);}
function addClass(elem, className){return elem.classList.add(className);}
function removeClass(elem, className){return elem.classList.remove(className);}

function forEachNode(nodeList, func)
{
    var i, n = nodeList.length;
    for (i=0; i<n; i++)
    {
        func(nodeList[i], i, nodeList);
    }
}

// 'boiler-plate' code above. 

window.addEventListener('load', onDocLoaded, false);

function onDocLoaded()
{
    myInit();
}

function myDodgyGetDay()
{
    return 2;
}

function myInit()
{
    var hours = ["Closed", "Closed", "9 AM to 9 PM", "9 AM to 5:30 PM","9 AM to 9 PM", "9 AM to 5:30 PM", "9 AM to 2:30 PM"]; //Sunday -> Saturday
    var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; // Variable to Convert getDay() to text
    var dayOfWeek = myDodgyGetDay();
    byId("open").innerHTML = "OPEN " + days[dayOfWeek] + " FROM " + days[dayOfWeek];
}
</script>
<style>
</style>
</head>
<body>

    <p id="open"></p>

</body>
</html>

Collectives™ on Stack Overflow

innerHTML function in Javascript not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related