Introduction To JavaScript

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 :

html content changed after clicking the button

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 style(CSS) changed after clicking the button*

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 :

*Content is hidden after clicking the button*

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 :

Related Posts:

Leave a Reply