JavaScript Introduction
JavaScript Can Change HTML Content
One of the techniques in JavaScript for working with HTML is called getElementById().
In the code below, we locate an HTML element with the identifier "demo" and modify the content inside it (innerHTML) to display "Hello JavaScript":
JavaScript allows you to use either double quotation marks or single quotation marks.:
JavaScript Can Change HTML Attribute Values
In this illustration, JavaScript modifies the content of the "src" (source) attribute within an "<img>" tag using the following code tag:
JavaScript Can Change HTML Styles (CSS)
Modifying how an HTML element looks is similar to altering an HTML property:
JavaScript Can Hide HTML Elements
You can hide things on a webpage by adjusting the "display" style in HTML using the display attribute:
JavaScript Can Show HTML Elements
You can reveal hidden parts of a webpage by adjusting the "display" style attribute in HTML.
<!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>
<!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>
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can change HTML attribute values.</p>
<p>In this scenario, JavaScript is used to alter the value of the src attribute (which stands for source) of an image.</p>
<button onclick="document.getElementById('myImage').src='/assets/files/bulb-on.png'">Turn on the light</button>
<img id="myImage" src="/assets/files/bulb-off.png" style="width:100px">
<button onclick="document.getElementById('myImage').src='/assets/files/bulb-off.png'">Turn off the light</button>
</body>
</html>
<!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>
<!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>
<!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>
HTML
CSS
Javascript
Jquery