Java Script Tutorials - What Java Script can do?

In previous chapter of Java Script we have learnt that what Java Script is and taken the brief introduction of what can Java Script do?

Now we are going to study more descriptively that what Java Script can do and how?

What Java Script can do?

Java Script can change the HTML element, HTML Element contents, style and attribute values. Java Script finds the HTML element by many methods. Most frequently used method is ‘getElementById()’ method.

getElementById() method

In this method Java Script find the HTML element by their ‘id’ attribute value. For example

<p id = "test"></p>
<script>
  document.getElementById('test').innerHTML = 'Hello World!';
</script>

Note : Java Script accepts both single quotes (‘ ’) and double quotes (“ “).

Java Script can Hide and Show the HTML elements

Java script can hide the HTML elements and show the elements as well by changing the element style (CSS). So we can also say that Java script can change the style of HTML elements.

This is how you can hide the HTML element.

<p id = 'test'>This paragraph is not displayed on the web page if you click below button.</p>
<button onclick = "document.getElementById('test').style.display = 'none';">Hide</button>

And this is how you can show the hidden element.

<p id = 'test'>This paragraph is not displayed on the web page if you click below button.</p>
<button onclick = "document.getElementById('test').style.display = 'block';">Show</button>

Note: You must be familiar with CSS to understand above example.

Java Script can change the value of attribute

Java script can change the value of HTML element attribute. In below example image source is change by Java Script function.

<button onclick = "document.getElementById('myImg').src = 'raincloud.png'">Rainy</button>
<img src = "cloud.png" width = '60%' id = "myImg" onclick = "cloud()">
<button onclick = "document.getElementById('myImg').src = 'cloud.png'">Sunny</button>

Java Script can Add or Remove the HTML elements

Java Script can add and remove the HTML elements. Check the example how to add the HTML element using java script.

<div id = "test">
  <p>Click the below button to create a new paragraph.</p>
</div>
 <button onclick = "createlem()">Create</button>
 
 <script>
  function createlem(){
   var para = document.createElement('p');
   var text = document.createTextNode('This is new paragraph.');
    para.appendChild(text);
   var elem = document.getElementById('test');
    elem.appendChild(para);
  }
 </script>

This is how Java Script can remove HTML element.

<div id = "elem_parent">
<p id = "elem_childe">Click the below button to remove existing paragraph.</p>
</div>
<button onclick = "delelem()">Remove</button>
 <script>
  function delelem(){
   var elem_parent = document.getElementById('elem_parent');
   var elem_childe = document.getElementById('elem_childe');
   
   elem_parent.removeChild(elem_childe);
  }
 </script>