Small countdown timer: innertext Browser compatibility issues

Source: Internet
Author: User

Did not expect a small timer incredibly will card Shell, Var seconds=50;
function Clock () {
Seconds--;//=seconds;
SetText (document.getElementById (' Count-down '), seconds);
if (seconds>0) setTimeout (clock,1000);//alert (seconds);

}

This is a very simple function, using settimeout write inside the clock function and call clock to implement recursive loop, so as to achieve the function of the timer, get div content (its ID is count-down), And the div is re-assigned according to the change of seconds, we can observe the change of time on the screen, but there is a problem .

At first I was using document.getElementById (' Count-down '). Innertext=seconds; The result is that the time on the screen is not changed and the desired effect is not achieved, so where does the problem arise, I alert you document.getElementById (' Count-down '). Innertext==null, the results found that actually output true, you know, my div content at the beginning of the value of the assignment is 50 ah.

Well, there is a mistake, this morning Baidu a bit innertext usage, the results found the problem, yesterday I test the environment is Firefox, just innertext in Firefox browser is not supported, it uses textcontent to replace InnerText. So, I put document.getElementById (' Count-down '). Innertext=seconds, and replaced it with SetText (the document.getElementById (' Count-down '), seconds);

SetText (element,content) is a function of its own definition to achieve the results of a compatible Firefox browser.

function SetText (element,content)
{
if (Element.innertext)
Element.innertext=content;
Else
Element.textcontent=content;
}

Well, the little timer, of course, is here if you use innerHTML is not a problem, because innerHTML is to remove the outermost HTML tags and keep the internal HTML tags, and at this time our div inside the wood has what HTML tags OH.


Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Small countdown timer: innertext Browser compatibility issues

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.