Change Content on the Web page

1.1 Dynamic Web pages

A good webpage can never be static. Based on the user inputs, the page should respond accordingly.

Method: It is a piece of code that is invoked and executed at the time of the call. More about methods by mmtuts

getElementById()

In HTML every tag can be assigned with an id. This id is a unique way of targeting the respective HTML tag it is associated with.

Read more about id and classes at w3School.com

Usage

document.getElementById('id of html tag').'attribute'='attributeName';

Example:

<html>
<head></head>
<body>
<p id="one"></p>
<button 
onclick="document.getElementById('one').innerHTML='Hello JavaScript';">
Click Me
</button>
</body>
</html>

Explanation:

The ‘onclick’ method is used to invoke different methods of clicking the button it is associated with. Once the button is clicked, getElementById function is invoked with the id of the paragraph i.e. ‘one’ and an attribute i.e. innerHTML. Further, the = is used to assign the value to the innerHTML of the tag.

Implementation

Javascript code can be written in any text editor. Preferred links of the editors are given below:

JavaScript code including HTML can be saved as HTML document. Whereas JavaScript independent code is saved as .js file.

Leave a Comment

Your email address will not be published. Required fields are marked *