Lets Play with buttons Using Javascript (Javascript Tutorial #2)

Hello blurtians , In the last tutorial we learn about alert messages in javascipt ans why and where we use them.
If you missed that you can visit the below link :
Javascript tutorial #1

In this tutorial we will learn about buttons and their manipulation using javascript.

In the last tutorial we saw the alert message use to display as soon as the web page is loaded or reloaded.
So in this lecture lets learn how to prompt the alert message according to our requirements.

---

The Step By Step Tutorial...!
Steps 1:

It is same as we have done in the last lecture i.e create a html structure properly including html , head and body tag.

Step 2:
Create two buttons using the button tag as shown in the below image. also set id for one of the buttons to b1. And set the onclick event for the other buton as shown in the below image. don't worry we will discuss everything , just follow along.

Step 3 :
Now , create a script tag and write the following line of code shown in the below image.

Step 4:
That's it you are done , now rum your .html file with any of the browser available in your system.

Step 5 :
Now click both the buttons and check the result. I have shared the output below.

Cool You have learned basics on how to manipulate buttons using javascript. Here is the Full code to the tutorial.

Explanation of some terms used in the above steps

1. WHat is ID ?
   An Id in Html is used with any of the tags for example button , div , span , a (anchor tag) etc. This Id alots a unique id to the tag it is initialised to. Like in the second step we have set id=b2 , so now we can manipulate this button using javascript by using the ID allocated to it.

2. What is onclick ?
   As used in the first button , onclick defines what will the button do if we click on that button. That's all you have to know about it.

3. What is document.getElementById ?
   It is a predefined method available in Javascript that is used to select an tag to which an id is initialised in html , like in our case we have used id as b2 for our button so here we are selecting our button using , document.getElementById (). In side the brackets we write the id of that tag we want select for further manupulation.

4. what is onclick=function() { } ?
   Simple the name says it all here it means that after the element with correct id is selected than on clicking on it a function will run that will perform the code written inside the curly brackets.
   In our case we are running alert function.

5. What document.getElementById("b2").onclick=function() { } ?
   So after knowing about both of them we can now understand that the above method is selecting an element with a id in call and on clicking that element a function is being runned that performs the code written inside the curly brackets.

That's all , i have tried to explain it in detail but anyways if someone has any doubt they can ask in comments below.
Thank You.