JavaScript Can Change HTML Content

One of many JavaScript HTML methods is getElementById() and getElementByName.

The example below “finds” an HTML element (with id=”demo”), and changes the element content (innerHTML) to “Hello JavaScript”

Java Script works on a set of conditions, its said that when someone clicks on the demo button, it is something like this, then it has set its condition, when someone clicks on the button mentioned by you, then the java script will run and the function in it Your made will be displayed

Example for JS.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>What is favorite code</h1> <p id="demo"></p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "JavaScript is favorite code"'>Click Me!</button>
</body>
</html>
HTML

This code OUTPUT Show :-

 



Page Title

What is favorite code




<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

<button onclick="document.getElementById('myImage').src='https://codefind.in/wp-content/uploads/2021/12/pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="https://codefind.in/wp-content/uploads/2021/12/pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='https://codefind.in/wp-content/uploads/2021/12/pic_bulboff.gif'">Turn off the light</button>

</body>
</html>
HTML

 

Output :-

 


What Can JavaScript Do?

JavaScript can change HTML attribute values.

In this case JavaScript changes the value of the src (source) attribute of an image.



 

 


<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>

</body>
</html> 
HTML

 

Output



What Can JavaScript Do?

JavaScript can change the style of an HTML element.


 

 

Leave a Reply

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