Ajax : getElementById innerHTML and value

Posted under » JavaScript on 15 December 2010

Dynamic HTML has livened things up a lot but it has gotten old. These days I hardly use JavaScript functions 'write()', 'writeln().

I heard AJAX is pretty too. What it does is do things in real time by refreshing the page.

Look at his example. Change the data of retail or sale price.

Retail Price
Sale Price

So how is this possible?

Header looks like this

function calculatePercentage (oldval, newval) {
    percentsavings = ((oldval - newval) / oldval) * 100;
    document.getElementById("results").innerHTML = Math.round(percentsavings*100)/100;
}

The contents

Retail Price


Sale Price


You have saved 50 %

You will notice in this case, it is not referring to innerHTML but value.

The event is triggered by "onkeyup". Most of the magic is done by the getElementById tag. It has been covered this, this, this, this, this and this.

In CSS or Javascript ID is meant for a single item. You can also use getElementsByClassName if there are many items.