JavaScript display value of string literal on the page

 JavaScript display value of string literal on the page

If you have been following along, so far all the lessons in previous sections used the browser's inspector for practice sessions.

It's about time we use JavaScript with HTML. Let us see how we can use JavaScript to change the contents of a page element. In this case we will be changing the text inside the paragraph.

Copy and paste this code in HTML and create a HTML page. If you don't know how, please check this lesson before you begin practicing. 

First we created a button and associated a onCilck event to it. Event's make stuff happen on website. Here, we are checking if the button is clicked. When it's clicked we pass the control to the function named callFunction. Inside the function body, we declare and initialize the string literal, use the built in function to find the para with id of para1 and set the inner HTML to Doers.

Check the video lesson for more info.

<!DOCTYPE html>

<button onclick="callFunction()">Click me!</button>
<p id="para1"></p>

function callFunction() {
var str = "Doers";
document.getElementById("para1").innerHTML = str;


Post a Comment