Small countdown timer: innerText browser compatibility problem, Timer innertext

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.