getElementById( ) method in JavaScript

 JavaScript can Change HTML Content

JavaScript is mostly use to create dynamic HTML webpages.

Dynamic means, thus webpages which supports user interaction.

Suppose You have created a HTML page which Contains a Form including Name Field and Password Field.

But when the user fills all data and clicks on Submit button, then never will happens.

It's just like, Cutting a Apple for Photoshoot 😒.

So to make the webpages interactive we can uses JavaScript like, when user clicks the submit button then the page will must show any result.

So to make thus type of webpages, we can uses JavaScript.

Now we have craeted a webpage which can contains a Form which includes Name field and Password field.

But the problem is this, how to access the Values that can be entered in Name and Password field by user ?

At that time to solve this problem, the JavaScript comes in Action.

How to Access the HTML Content ?

In JavaScript to access the HTML elements, a methos called getElementByID( ) help us.

By using this method, we can easily able to access the values of those field or element in HTML webpages.

Method : getElementByID( ) 

In this method we have to pass the id of related field or element of HTML document to access the those element or field.

Syntax :

 document.getElementById();

This method can returns the element with an id specified with element.

How to use ?

To use getElementById( ) method, we need to create a script.

In that script we can be able to use it.

Example :

 <center>
    <h1 id="text">Click on following Button,<br>To Change the color of this Text !</h1><br>
    <button onclick="changeColor()">Click Here</button>
 </center>

 <script>
    function changeColor()
    {
       var element = document.getElementById("text");
       element.style.color = "red";
    }
 </script>

Here we are created a sentence in <h1> tag, which has id 'text'.

Then we have created a button, and in this button we have used onclick method of JavaScript to call a user defined function called changeColor( ) .

To create changeColor( ) function, we have created a JavaScript.

In script, we have created function changeColor( ) .

In changeColor( ), we have created variable element, which can calls method getElementById( ), and in that we have passed the id of those <h1> tag which is 'text'.

Then we have changed the color of those element by using simple CSS.

Example of getElementById( )

 <center>
   <h1>Here we are created a Mechanism !</h1>
   <br>
   <br>
    
   <button onclick="turnOn()">Turn on the light</button>
   <img id="myImage" src="https://bit.ly/3CXhk1Y" style="width:200px">
   <button onclick="turnOff()">Turn off the light</button>

   <script>
    function turnOn()
      {
         document.getElementById('myImage').src="https://bit.ly/3kpsQN8";
      }

    function turnOff()
      {
        document.getElementById('myImage').src="https://bit.ly/3CXhk1Y";
      }
 </script>
 </center>

So in this Post we have learned,

1) How to change the emelement or contentes of webpage.

2) How to assecc the values of fields

3) What is getElementById( ) method

4) How to use getElementById( ) method

I Hope it will help you to learn JavaScript more !

Thank You !

---

Also Visit

---