Introduction To JavaScript

October 28, 2017
Fabian Ros
0 Comments

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 :