Javascript accessing elements

Javascript provides the ability for getting the value of an element on a webpage as well as dynamically changing the content within an element.

This lesson focuses on:

Getting the value of an element
Changing the content within an element

Getting the value of an element

To get the value of an element, the getElementById method of the document object is used. For this method to get the value of an element, that element has to have an 'id' given to it through the id attribute.

Example:

<script type="text/javascript">
function getText(){

	//access the element with the id 'textOne' and get its value
	//assign this value to the variable theText
	var theText = document.getElementById('textOne').value;
	
	alert("The text in the textbox is " + theText);

}
</script>

<input type="text" id="textOne" />

<input type="button" value="Get text" onclick="getText()" />

Output:

NOTE: Since getElementById() is a method of the document object, you can access it only with the document. prefix -- document.getElementById();

NOTE: To use getElementById() to access an element, be sure to set the id attribute of any element(s) you want to access this way, otherwise it will not work.

NOTE: To access a non-input element through getElementById(), you will have to use the innerHTML property (scroll down to read about the innerHTML property.

Changing the content within an element

To change the content within an element, use the innerHTML property. Using this property, you could replace the text in paragraphs, headings and other elements based on several things such as a value the user enters in a textbox. For this property to change the content within an element, that element has to have an 'id' given to it through the id attribute.

Example:

<script type="text/javascript">
function changeTheText(){

	//change the innerHTML property of the element
	//whose id is 'text' to 'So is HTML!'
	document.getElementById('text').innerHTML = 'So is HTML!';

}
</script>

<p id="text">Javascript is cool!</p>
<input type='button' onclick='changeTheText()' value='Change the text' />

Output:

Javascript is cool!

Click on the button to change the text.

You can also change the text of elements based on user input:

<script type="text/javascript">
function changeInputText(){

	
	/*
	
	change the innerHTML property of the element
	whose id is 'theText' to the value from the
	variable usersText which will take the value
	from the element whose id is 'usersText'
	
	*/
	
	
	var usersText = document.getElementById('usersText').value;
	
	document.getElementById('theText').innerHTML = usersText;

}
</script>

<p id="theText">Enter some text into the textbox and click the buttton</p>
<input type="text" id="usersText" />
<br />
<input type="button" onclick="changeInputText()" value="Change the text" />

Output:

Enter some text into the textbox and click the buttton