How to use getElementById in JavaScript

Sunday, November 2, 2008

How to use getElementById in JavaScript

Following codes will show you how easy it is to use JavaScript getElementById to manipulate HTML elements.

Example 1 - On mouse over the text will be red, on mouse out it will be black again.


<html>
<head>

<script type="text/javascript">

function chng_color()
{
document.getElementById('my_div').style.color = 'red';
}

function normal_color()
{
document.getElementById('my_div').style.color = 'black';
}

</script>

</head>

<body>

<div id="my_div" onmouseover="chng_color()" onMouseOut="normal_color()">

This is the first example!!!

</div>

</body>
</html>

Example 2 - Get entered text of a text box and display it on a JavaScript alert box.


<html>
<head>

<script type="text/javascript">

function alrt_text()
{
var entered_text = document.getElementById('my_text_box').value;
alert(entered_text);
}

</script>

</head>

<body>

Your Text:
<input type="text" name="my_text_box" id="my_text_box" onBlur="alrt_text()" />

</body>
</html>