JavaScript clock works on Chrome but doesn't work with Firefox or IE
Question
I'm making a few PHP sites for a client and I have a small problem.
I have a JavaScript text clock located at the top and the bottom of the page (each a copy of the other).
They work perfectly in Chrome, but on Firefox and IE it sometimes doesn't. I've made a new, clean PHP file and attached the JS to check if the problem is from the Javascript file. It doesn't appear to be.
The top clock is GetClock() and the bottom one is GetClockPrint()
Here's the Javascript code for the clock:
tday=new Array("Domingo","Segunda-feira","Terça-feira","Quarta-feira","Quinta-feira","Sexta-feira","Sábado");
tmonth=new Array("Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro");
function GetClock(){
var d=new Date();
var nday=d.getDay(),nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getYear(),nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds(),ap;
if(nyear<1000) nyear+=1900;
if(nmin<=9) nmin="0"+nmin;
if(nsec<=9) nsec="0"+nsec;
document.getElementById('clockbox').innerHTML="<u><h4>"+tday[nday]+", "+ndate+" de "+tmonth[nmonth]+" de "+nyear+", "+nhour+":"+nmin+":"+nsec+"</h4></u>";
document.getElementById('clockbox2').innerHTML="<u><h4>"+tday[nday]+", "+ndate+" de "+tmonth[nmonth]+" de "+nyear+", "+nhour+":"+nmin+":"+nsec+"</h4></u>";
}
function GetClockPrint(){
var c=new Date();
var nday=c.getDay(),nmonth=c.getMonth(),ndate=c.getDate(),nyear=c.getYear(),nhour=c.getHours(),nmin=c.getMinutes(),nsec=c.getSeconds(),ap;
if(nyear<1000) nyear+=1900;
if(nmin<=9) nmin="0"+nmin;
if(nsec<=9) nsec="0"+nsec;
document.getElementById('clockbox2').innerHTML="<u><h4>"+tday[nday]+", "+ndate+" de "+tmonth[nmonth]+" de "+nyear+", "+nhour+":"+nmin+":"+nsec+"</h4></u>";
}
window.onload=function(){
GetClock();
}
And here's the HTML code for the page itself (no PHP code yet)
<table align="center"><!-- Botões de submeter/reiniciar e relógio -->
<tr>
<td>
<div align="left">
<button type="button" id="restart1" onClick="window.open('../../Index.php','_self')"><img src="../../restart.png">Recomeçar</button>
</div>
</td>
<td valign="middle">
<div id="clockbox" align="center"></div>
</td>
<td align="right">
<div align="right">
<button type="button" id="print1" onClick="submeter()"><img src="../../Check.png">Imprimir esta página</button>
</div>
</td>
</tr>
</table>
<!-- Start of the second clock code -->
<table align="center">
<tr>
<td>
<div align="left">
<button type="button" id="restart2" onClick="window.open('../../Index.php','_self')"><img src="../../restart.png">Recomeçar</button>
</div>
</td>
<td valign="middle">
<div id="clockbox2" align="center"></div>
</td>
<td align="right">
<div align="right">
<button type="button" id="print2" onClick="submeter()"><img src="../../Check.png">Imprimir esta página</button>
</div>
</td>
</tr>
</table>
Please forgive the Portuguese text. I don't know what's wrong here... I want the clock to show on IE and Firefox as normally as it shows on Chrome. Can you guys help me out, please?
I'm using XAMPP to simulate a PHP server. Don't know if that will be helpful.
Thank you in advance
2 answers
solution1
1 2014-12-18 21:15:01
I used http://jsfiddle.net/poseavx0/1/ instead of your fiddle (you had an extra } at the end, and you had it set to run 'onLoad instead of No wrap - in <head> , so your window.onload would never fire).
I was still unable to duplicate the problem.
I can only assume that you have/had multiple window.onload calls where subsequent calls to window.onload would overwrite previous calls because of your comment "I went into FF, and I removed a body onload function" (emphasis mine).
The solution to this could be to set up your window.onload as you did in your fiddle:
window.onload = function () {
// call as many functions as you want in here
};
Billy had a very valid point regarding the clocks, although it would not affect the display. Your CSS for #clockbox and #clockbox2 really should be:
#clockbox, #clockbox2 {
text-decoration:underline;
margin: 1.33em 0;
font-weight: bold;
}
Also, in your fiddle, you do not have an element with an id of clockbox2 . Instead, it seems to be called relogio2 (based on the markup) but your JavaScript does not reflect this name change. As such, clockbox2 cannot be set.
Overall, you could probably benefit from a decent cross-browser event attaching routine.
var addHandler = function addHandler(object, event, handler, useCapture) {
var existingHandlers,
o = typeof object === 'string' ? document.getElementById(object) : object;
useCapture = !!useCapture; // coerce to boolean
if ('addEventListener' in o) {
o.addEventListener(event, handler, useCapture);
} else if ('attachEvent' in o) {
o.attachEvent(event, handler);
} else {
existingHandlers = o['on' + event];
if (existingHandlers) {
o['on' + event] = function (e) {
existingHandlers(e);
handler(e);
};
} else {
o['on' + event] = handler;
}
}
};
See http://jsfiddle.net/poseavx0/2/ for that in action (which also refactors most of your JavaScript).
solution2
0 2014-12-15 10:29:34
U can use muse..
Paste in this code an it will work.
<table align="center"><!-- Botões de submeter/reiniciar e relógio -->
<tr>
<td>
<div align="left">
<button type="button" id="restart1" onClick="window.open('../../Index.php','_self')"><img src="../../restart.png">Recomeçar</button>
</div>
</td>
<td valign="middle">
<div id="clockbox" align="center"></div>
</td>
<td align="right">
<div align="right">
<button type="button" id="print1" onClick="submeter()"><img src="../../Check.png">Imprimir esta página</button>
</div>
</td>
</tr>
</table>
<!-- Start of the second clock code -->
<table align="center">
<tr>
<td>
<div align="left">
<button type="button" id="restart2" onClick="window.open('../../Index.php','_self')"><img src="../../restart.png">Recomeçar</button>
</div>
</td>
<td valign="middle">
<div id="clockbox2" align="center"></div>
</td>
<td align="right">
<div align="right">
<button type="button" id="print2" onClick="submeter()"><img src="../../Check.png">Imprimir esta página</button>
</div>
</td>
</tr>
</table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.