How to Update a Display Field Using JavaScript
JavaScript uses what is called the Direct Object Model, or DOM. This makes it easy to reference items on a page based upon their class or ID. You can then interact with portions of that object using event handlers. In a form, for instance, the display field is referenced as the value of a particular object and can be written to using JavaScript by calling that form's name and changing the value. This construction makes JavaScript an easy language to learn and interact with.
Other People Are Reading
Instructions
-
-
1
Open the webpage you are working on in a text editor or dedicated development environment.
-
2
Add the "<script type="text/javascript">" and "</script>" lines at the top of the file in the "<head>" tag area.
-
-
3
Add a function inside the "<script>" tags by typing out three lines:
function changeValue() {
myForm.myText.value="I made a change!";
}
-
4
Create a form named myForm and a text field within that form named myText in the "<body>" of your page's code by adding these three lines:
<form name=myForm>
<input type=text name=myText>
</form>
-
5
Add an event handler that then calls the "changeValue()" function. For example, to change the text display when mousing over a link, add the line "<a href="#" onMouseOver="changeValue()">Mouse Over Me To Show The Text</a>".
-
1
