JS Introduction

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

JavaScript Introduction

JavaScript Can Change HTML Content

JavaScript HTML methods is getElementById().

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

Example

				
					<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>
</body>
</html>

				
			

Output

What Can JavaScript Do?

JavaScript can change HTML content.

JavaScript is used for both double and single quotes:

Example

				
					<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">Click Me!</button>
</body>
</html>

				
			

Output

What Can JavaScript Do?

JavaScript can change HTML content.

JavaScript Can Change HTML Attribute Values

In this example JavaScript the value of the src (source) attribute of an <img> tag is changed:

Example

				
					<!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='pic_bulbon.gif'">First Image</button>
<img decoding="async" id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Second Image</button>
</body>
</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.

JavaScript Can Change HTML Styles (CSS)

To change the style of an HTML element, is a variant of changing an HTML attribute:

Example

				
					<!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>

				
			

Output

What Can JavaScript Do?

JavaScript can change the style of an HTML element.

JavaScript Can Hide HTML Elements

HTML elements is hidden by changing the display style

Example

				
					<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can hide HTML elements.</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
</body>
</html>

				
			

Output

What Can JavaScript Do?

JavaScript can hide HTML elements.

JavaScript Can Show HTML Elements

Displaying hidden HTML elements can be done by changing the display style:

Example

				
					<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can show hidden HTML elements.</p>
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>
</body>
</html>

				
			

Output

What Can JavaScript Do?

JavaScript can show hidden HTML elements.