Button Object, dom events - Javascript (JS) Tutorial

Topic

How to change button values using javascript?
or
What are the events, properties, functions, associated with form button?

Explanation

Basics of HTML form button

Button Object :
Button is one of the most commonly used form types. The following syntax will get the button object in javascript
Syntax: document.formname.buttonname

Example Code:
<form name=buttonform>
<input name=button1 value=test type=button>
</form>

<script language="javascript">
var buttonobject= document.buttonform.button1;
</script>

Here are the events, dom properties and method associated with button element.

Event Handlers: Associated with Form Button:
All the example below use a javascript function output
<script language=javascript>
function output()
{
alert("testing button events");
}
</script>

Event Handler	Description	Example
onMouseOver	This is invoked when a mouse is moved over the button	<input type=button onMouseOver="output()"> Result:
onMouseOut	This is invoked when a mouse is moved over and then out of the button	<input type=button onMouseOut="output()"> Result:
onMouseDown	This is invoked when a mouse is pressed down on the button	<input type=button onMouseDown="output()"> Result:
onMouseUp	This is invoked when a mouse is pressed down on the button and released	<input type=button onMouseUp="output()"> Result:
onClick	"onClick" function is invoked when a mouse click is done on the button	<input type=button onClick="output()"> Result:
onBlur	Executes some code when the button loses focus using tab	<input type=button onBlur="output()"> Result:
onFocus	Executes some code when the button gets focus using tab	<input type=button onFocus="output()"> Result:

DOM Properties:
The following are the list of DOM (Dynamic Object Model) properties that can be used to get and alter button properties in javascript.
The below examples are based on the form
<form name=testb>
<input name=myb type=button value=xxx>
</form>

DOM Property	Description	Example
name	Used to get button's name	To Get: var ss = document.testb.myb.name;
type	Used to get form type	To Get: var ss = document.testb.myb.type;
value	Used to set or get button's value	To Get: var ss = document.testb.myb.value; To Set:: document.testb.myb.value = "testy";
disabled	Used to disable or enable a button. By setting this property as true we can disable.	To Disable: document.testb.myb.disabled = true; To Enable:: document.testb.myb.disabled = false;

DOM Methods:
The following are the list of DOM (Dynamic Object Model) methods that can be used to do dynamic changes like button click using javascript.

DOM Method	Description	Example
click()	Used to dynamically make a button click	To Click: document.testb.myb.click();
blur()	Used to dynamically make the button blur	To Blur: document.testb.myb.blur();
focus()	Used to dynamically get focus on the button	To Focus: document.testb.myb.focus();

Example: Change Button value on mouse over

Result: