DEVFYI - Developer Resource - FYI

How to Accessing Elements using javascript?

JavaScript Interview Questions and Answers

(Continued from previous question...)

52. How to Accessing Elements using javascript?

To do something interesting with HTML elements, we must first be able to uniquely identify which element we want. In the example
<body>
<form action="">
<input type="button" id="useless" name="mybutton" value="doNothing" />
</form>
</body>

We can use the "getElementById" method (which is generally preferred)
document.getElementById("useless").style.color = "red";
or we can use the older hierarchical navigation method,
document.forms[0].mybutton.style.color = "blue";
Notice that this uses the "name" attribute of the element to locate it.
# Example of Accessing Elements in a DOM.

<script type="text/javascript" >
function showStatus() {
var selectWidget = document.forms.beerForm.elements["beer"];
var myValue = selectWidget.options[selectWidget.selectedIndex].value;
alert('You drank a \"'+ myValue +"\"");
return true;
}
</script>

<form name="beerForm" action="">
<select name="beer">
<option selected="selected">Select Beer</option>
<option>Heineken</option>
<option>Amstel Light</option>
<option>Corona</option>
<option>Corona Light</option>
<option>Tecate</option>
</select>

<input type="button" name="submitbutton" value="Drink"
onclick="showStatus()" />
</form>

(Continued on next question...)

Other Interview Questions