digital clock not working in FireFox

Question

I made a digital clock and it works for IE (as long as I allow Javascript) and in Google Chrome. However, I can't get it to work in FireFox. It is strange because I have other JavaScript in my web page that works just fine in FireFox (validation, cookies, ect.). It must be something to do with the digital clock in the FireFox browser.

I was wondering if anyone could take a look and see if FireFox doesn't allow something that I have used. Thank you for your time! :)

JavaScript

                                        /*##### CLOCK #####*/
function displayDate()
{
    var dateObject = new Date();
    var dayArray = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"); //Day Array
    var monthArray = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"); //Month Array
    var day = dateObject.getDay();
    var month = dateObject.getMonth();

    var dateDiv = document.getElementById("theDate"); //Connect to the HTML theDate ID
        dateDiv.innerText = " " + dayArray[day] + ", " + monthArray[month] + " " + dateObject.getDate() + ", " + dateObject.getFullYear() + " "; //Prints out on screen
}   


function digitalClock() 
{
    function displayTime() 
    {

        var currentTime = new Date();
        var hours = currentTime.getHours();
        var minutes = currentTime.getMinutes();
        var seconds = currentTime.getSeconds();   
        var meridiem = "AM";  // Default set to AM

        if (hours > 12) // if hours is greater than 12
        {
            hours = hours - 12;

            meridiem = "PM";  
        }

        if (hours === 0) //if hours is 0 then show 12
        {
            hours = 12;    
        }

        if(hours < 10) // if hours is less than 10 then add 0 - 9 will read as 09
        {
            hours = "0" + hours;
        }

        if(minutes < 10) // same if statement for minutes and seconds
        {
            minutes = "0" + minutes;
        } 

        if(seconds < 10) 
        { 
            seconds = "0" + seconds;
        }

    var clockDiv = document.getElementById("clock"); //Connects to the HTML clock div
        clockDiv.innerText = hours + ":" + minutes + ":" + seconds + " " + meridiem; // Prints out on screen
}

displayTime();

    setInterval(displayTime, 1000); //setInterval to make the clock tick each second
}

                                        /*##### CLOCK END ##### */

CSS

    #clockContainer 
{

    border-style: solid;
    border-color: #A9D0F5;
    width: 320px;
    padding: 5px;
    border: 15px 
    margin: 25px;
    background-color: gray;
    float: right;
}




                                        /* Java divs */
#clock 
{
    color: white;
    font-family: courier, monospace;
    font-size: 30px;
    text-align: center;
}
#theDate 
{
    color: white;
    font-family: courier, monospace;
    font-size: 20px;
    text-align: center;

}

HTML

<body onload="digitalClock()">


<div id="hContainer">
<div id="img"><img src="../Images/Name1.jpg" width="600" height="100" alt=""/></div>

<div id="clockContainer">
<div id="clock"></div><br />
<div id="theDate"></div>
</div>

</div>
<script type="text/javascript">
/* <![CDATA[ */

displayDate();

/* ]]> */
</script>

I have created an .html document just to check the clock script, to make sure it is not being affected by anything else, and it is only this script that is not working correctly.

Answer 1

Firefox doesn't support innerText, you need to use textContext instead (that works on FF & Chrome - not sure about IE). For example

            dateDiv.textContent = " " + dayArray[day] + ", " + monthArray[month] + " " + dateObject.getDate() + ", " + dateObject.getFullYear() + " "; //Prints out on screen

Reference:
http://blog.coderlab.us/2005/09/22/using-the-innertext-property-with-firefox/

digital clock not working in FireFox

Question

1 answers

solution1
0 ACCPTED 2015-01-24 20:26:26

digital clock not working in FireFox

Question

1 answers

solution1 0 ACCPTED 2015-01-24 20:26:26

solution1
0 ACCPTED 2015-01-24 20:26:26