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 :

default/before clicking button

 

 

 

 

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 :

default/before clicking button
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 :

Html content is unhidden here

 

 

 

 

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 :

hidden html content is not displayed here

 

 

 

 

hidden html content is displayed after clicking the button

 

 

 

 

 

 

Leave a Reply

avatar
  Subscribe  
Notify of