Javascript
  1. Javascript intro
  2. Javascript basics
  3. Javascript variables
  4. Javascript functions
  5. Javascript popup boxes
  6. Javascript conditions
  7. Javascript loops
  8. Javascript arrays
  9. Javascript objects
  10. Javascript strings
  11. Javascript events
  12. Javascript errors
  13. Javascript DOM
  14. Javascript elements
  15. Javascript new windows
  16. Javascript date & time
  17. Javascript cookies
  18. Javascript print
  19. Javascript redirect
  20. Javascript void
  21. Javascript summary

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 tutorial focuses on:

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!

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

Example:
<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
Practice
  1. Online code editor
  2. Examples
  3. Exercises
  4. Quizzes
Reference
  1. Web terms glossary
  2. Web reference
Tools & How to's
  1. Web dev tools
  2. Web dev how to's
Rate this site
  1. Rate this site
  2. Visitor comments
  3. Email us!
  4. Tell a friend
© Copyright 2009-2010 Landofcode.com
Terms of use | Privacy policy | Copyright information