document.all['btn']We know learn that when we assign a handler onClick in the HTML tab button the web browser creates property onclick of this element. Thus, all we need to do is just assign a new value to this property. For example:
document.all['btn'].onclick = null;In this example we assigned to the event handler a special keyword null, which tells the browser that currently this element does not have any handler for this event. This following link cancels event handler of the previous button. Try to click on the upper button after you clicked on the link and make sure it's no longer working.
 |
Unlike onClick inside HTML tags (which can be written with mixed lower/upper case characters),
onclick in JavaScript should be written
in lower case. Otherwise JavaScript will create a new property with name, let's say ONClick, but the old
onclick will stay and work.
|
Now when we know how to destroy an event handler let's talk about how to change it. To change an event handler all we need to do is to assign it a new function. How to do this? First of all we need to mention that Function is one more JavaScript object. Every time we create a function JavaScript creates an new instance of this object. How can we create a new function? One of the methods we saw before we just didn't talk about it as of creation of anew object. We can create a new function lik ewe always did:
function new_fun()
{
alert("Now I'm printing this message");
}
If we already have a function created this way we can assign property onclick the name of the function:
document.all['btn'].onclick = new_fun;Try click on this link and see that the button above works completely different now.
Now we can do two different things:
It turns out that there is one more method to do that. To use this method we need to learn another way of creation a Function object. As usual object Function can be created with operator new. The general syntax is:
var another_fun = new Function( "msg", "alert(msg);" );Created by like this function can be assigned by its name (another_fun in our case) or directly without creating an object with this name:
document.all['btn'].onclick = new Function( "alert('Now I will print another message');" );
Click on this link
to see if it works.
The following example contains the complete code that shows all these method applied to a set of functions. Please see how it's written and what it does. Besides changing event handlers pay attention how we can change the look of the buttons and how it is done.
More difficult detail is when to perform the calculation. Let's look how usual calculator works (at this [point you are
expected to open standard Windows or Linux calculator) and try to calculate 22+44
Please notice the following:
Another difficult point in this project may be the notation part. We already discussed the issue about conversion from string to a number and the other way around, but we should remember that the notation refers only to the currently displayed number and to the result of the operation not to the stored number. Because the user can switch to a different notation while entering the second number. Taking all of these into consideration it would be much more convenient to store numbers as numbers not as strings. Thus, when user presses an operation button we need to convert the display string into number using the right base. It's also important to remember about base when we are about to display a results of operation. We first need to convert it from number into a string using the right base and then display it to the user.
How to deal with log text area is left to the reader.
The following example illustrates the ideas discussed above including redefining event handlers.