Skip to content

Buttons that change units of measurement dynamically on page

I am trying to implement a JavaScript function that will modify the result values that are outputted into a field.

Examples of results output to a field are kilobytes , and British pounds.

However I have included buttons in my form which will I will want to use to modify the results to make them in

Gigabytes, Megabytes and Pennies

See the screenshot below:

enter image description here

Pseudo Code:

>Button pressed calls function.
>Function identifies what button user pressed
>If the button is related to currency unit then modify global variable **currency**
>If the button is related to data units then modify global variable **data**
>Recalculate all fields using new variable values and output to form.

The way I am thinking of implementing it will be I will have two Global variables in my JavaScript which will be changed depending on what button is pressed. Then they will be used in the calculations for data and money. Why a global? – well I have separate JavaScript functions that retrieve values and calculate them.

I need input on how to detect which button is pressed?

Also if you know of any similar examples of JS that would be great.

Any advice welcome!

Answer

In order to know which button is pressed add an onclick event handler to all the buttons and onclick event handler function you can detect the value of each of the button, from which you can identify the button clicked. For example

<input type="button" value="gb" onclick="identifyButton(this)" />

function identifyButton(obj)
{
   alert(obj.value);
}

Hope this helps you.