Rupa's Clock and Dynamic Creation of Text

Javascript Explanation: Clock and Timeout

I tried to comment the source code fairly extensively, so view that for more information.

My friend Rupa made a Javascript clock that will keep the precise time and update it once a second. The function runClock() will get the current time in hours, minutes, and seconds. But we need to have this function called repeatedly, once a second, as time marches on. The way this works is by the use of a setTimeout function that is actually called as the last line of the runClock() function. setTimeout requires 2 parameters, the first is the name of the function to be repeatedly called. The second is the amount of milliseconds to wait between each call. We made that 1000, which is 1 second. Thus, the runClock() functions will be called once a second.

Javascript Explanation: Creating Text Dynamically

Look at the source code and you will see more info on how this dynamic creation of text is achieved. We use a document method called createElement() and then another one called appendChild().

With createElement() we need to supply the type of element we want to create, here it is a "span:. We set a variable equal to this function call and then we can define the attributes of this element, such as id, className, and innerHTML.

With appendChild() we must supply the name of this variable.This method is attached to the element in the docuent that you want to append the span to. So in this case we type: document.getElementById("rupa").appendChild(spanTag); because we want to append our span(s) to the rupa div. Note I say span(s) because each time we click we get a new one. Incidentally, in my source code, commented out, I show you how you can limit the creation to just one.

Click this button to create Span Tag dynamically:

It was Plato Who Pioneered OOP!