Small countdown timer: innerText browser compatibility problem, Timer innertext
I didn't expect a small timer to get stuck, var seconds = 50;
Function clock (){
Seconds --; // = seconds;
SetText (document. getElementById ('count-low'), seconds );
If (seconds> 0) setTimeout (clock, 1000); // alert (seconds );
}
This is a very simple function. It uses setTimeout to write it inside the clock function and calls clock to implement recursive loops, so as to achieve the timer function and obtain the div content (itsThe id is count-down), and The div is assigned a value based on the seconds change. We can observe the time change on the screen, but there is a problem at this time,
At first I used document. getElementById ('count-low '). innerText = seconds; the result does not change the time on the screen and does not achieve the desired effect. So where is the problem? I alertDocument. getElementById ('count-low'). innerText = null. The result shows that true is output. You need to know that the initial value of my div content is 50.
Well, something wrong. I got up this morning and Baidu used innerText. I found the problem. Yesterday I tested the environment firefox, and it happened that innerText was not supported in the firefox browser, it replaces innerText with textContent. So, IDocument. getElementById ('count-low'). innerText = seconds; replace it with setText (document. getElementById ('count-low'), seconds );
SetText (element, content) is a self-defined function that is compatible with the firefox browser.
Function setText (element, content)
{
If (element. innerText)
Element. innerText = content;
Else
Element. textContent = content;
}
Well, there's no problem if you use innerHTML here, because innerHTML removes the outermost html.The internal html Tag is retained while the html Tag inside our div is retained.
Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.