Html contents can be changed byJavascripts.
getElementById( ) is one of the JS HTML.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Intro?</h2>
<p id="ex">JavaScript can change HTML contents.</p>
<button type="button" onclick='document.getElementById("ex").innerHTML = "Hello!"'>Click Me!</button>
</body>
</html>
Output :
CSS (Html Styles) can be changed by Javascripts :
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Intro</h1>
<p id="ex">Style of an HTML element can be changed from JS.</p>
<button type="button" onclick="document.getElementById('ex').style.fontSize='40px'">Click Me!</button>
</body>
</html>
Output :
HTML Elements can be hidden from JS :
It is done by changing the display style.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Intro</h1>
<p id="ex">HTML elements can be hidden from JS</p>
<button type="button" onclick="document.getElementById('ex').style.display='none'">Click Me!</button>
</body>
</html>
Output :
HTML Elements can be shown by JS
With JS the hidden Html Elements can be displayed by changing the display style.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Intro</h1>
<p>HTML elements can be displayed from JS</p>
<p id="ex" style="display:none">Hello!</p>
<button type="button" onclick="document.getElementById('ex').style.display='block'">Click Me!</button>
</body>
</html>
Output :
