Friday, January 6, 2012

Access HTML elements from JavaScript, using document.getElementById().

To access HTML elements with ID from JavaScript, we can use document.getElementById(). It's a example to change the text in HTML.
Change html element's text
<!doctype html>
<head>
<title>Mobile-Web-App: Test Javascript</title>
<meta charset="utf-8">

<script>
function myOnLoad(){
var myMsg = document.getElementById("msg");
msg.innerHTML = "Nice to me you:)";
}

window.onload = myOnLoad;

</script>


</head>
<body>
<h1>Mobile-Web-App: Test Javascript</h1>
<p>How to access HTML elements from JavaScript, using document.getElementById().</p>

<p id="msg">Hello JavaScript!</p>




</body>
</html>


Remark:
- If we place JavaScript code in <head>, it will be executed before the page loaded. So it cannot find the id. That's why we implement our job in a function myOnLoad(), and call the function once page load finished. The code "window.onload = myOnLoad" means once the document loaded, call the function with name of myOnLoad.

- To change the text in HTML document, we can set innerHTML property of the element.



No comments:

Post a Comment