JAVA ADVANCED

JAVA ADVANCED

Javascript Advanced

JavaScript getElementById

Have you ever tried to use JavaScript to do some form validation? Did you have any trouble using JavaScript to grab the value of your text field? There's an easy way to access any HTML element, and it's through the use of id attributes and the getElementById function.

JavaScript document.getElementById

If you want to quickly access the value of an HTML input give it an id to make your life a lot easier. This small script below will check to see if there is any text in the text field "myText". The argument that getElementById requires is the id of the HTML element you wish to utilize.

JavaScript Code:

<script type="text/javascript">

function notEmpty(){

        var myTextField = document.getElementById('myText');

        if(myTextField.value != "")

               alert("You entered: " + myTextField.value)

        else

               alert("Would you please enter some text?")            

}

</script>

<input type='text' id='myText' />

<input type='button' onclick='notEmpty()' value='Form Checker' />

Display:

 

document.getElementById returned a reference to our HTML element myText. We stored this reference into a variable, myTextField, and then used the value property that all input elements have to use to grab the value the user enters.
There are other ways to accomplish what the above script does, but this is definitely a straight-forward and browser-compatible approach.

Things to Remember About getElementById

When using the getElementById function, you need to remember a few things to ensure that everything goes smoothly. You always need to remember that getElementById is a method (or function) of the document object. This means you can only access it by using document.getElementById.
Also, be sure that you set your HTML elements' id attributes if you want to be able to use this function. Without an id, you'll be dead in the water.
If you want to access the text within a non-input HTML element, then you are going to have to use the innerHTML property instead of value. The next lesson goes into more detail about the uses of innerHTML.

JavaScript innerHTML

Ever wonder how you could change the contents of an HTML element? Maybe you'd like to replace the text in a paragraph to reflect what a visitor has just selected from a drop down box. By manipulating an element's innerHtml you'll be able to change your text and HTML as much as you like.

Changing Text with innerHTML

Each HTML element has an innerHTML property that defines both the HTML code and the text that occurs between that element's opening and closing tag. By changing an element's innerHTML after some user interaction, you can make much more interactive pages.
However, using innerHTML requires some preparation if you want to be able to use it easily and reliably. First, you must give the element you wish to change an id. With that id in place you will be able to use the getElementById function, which works on all browsers.
After you have that set up you can now manipulate the text of an element. To start off, let's try changing the text inside a bold tag.

JavaScript Code:

<script type="text/javascript">

function changeText(){

        document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';

}

</script>

<p>Welcome to the site <b id='boldStuff'>dude</b> </p> 

<input type='button' onclick='changeText()' value='Change Text'/>

Display:

Welcome to the site dude
You now know how to change the text in any HTML element, but what about changing the text in an element based on user input? Well, if we combine the above knowledge with a text input...

Updating Text Based on User Input

By adding a Text Input, we can take to updating our bold text with whatever the user types into the text input. Note: We updated the function a bit and set the id to boldStuff2.

JavaScript Code:

<script type="text/javascript">

function changeText2(){

        var userInput = document.getElementById('userInput').value;

        document.getElementById('boldStuff2').innerHTML = userInput;

}

</script>

<p>Welcome to the site <b id='boldStuff2'>dude</b> </p> 

<input type='text' id='userInput' value='Enter Text Here' />

<input type='button' onclick='changeText2()' value='Change Text'/>

Display:

Welcome to the site dude

Changing HTML with innerHTML

You can also insert HTML into your elements in the exact same way. Let's say we didn't like the text that was displayed in our paragraph and wanted to updated it with some color. The following code will take the old black text and make it bright white. The only thing we're doing different here is inserting the html element span to change the color.

JavaScript Code:

<script type="text/javascript">

function changeText3(){

        var oldHTML = document.getElementById('para').innerHTML;

        var newHTML = "<span style='color:#ffffff'>" + oldHTML + "</span>";

        document.getElementById('para').innerHTML = newHTML;

}

</script>

<p id='para'>Welcome to the site <b id='boldStuff3'>dude</b> </p> 

<input type='button' onclick='changeText3()' value='Change Text'/>

Display:

Welcome to the site dude
This was a pretty simple example for changing the HTML of an element. All we did was take the old text that was in the paragraph tag and surround it in a span tag to change the color. However, there are many more things you can do by changing an element's HTML, so don't forget this useful tool!