How to select an element in an HTML page? This is often get in my way, while beginning to learn Javascript, CSS and HTML. The simple answer is with javascript we have a method named “getElementById()” and always works as

document.getElementById('element ID');

Lets dive into code and see how things work. Lets say we have an HTML page as

	


		
		
		
	
	
		

			Hello World.
		
		

			Hello you, this is JS.
			one
			two
		
	

There are two “div” tags in it and they are having id values as “one” and “two” respectively. Then we have two buttons inside the second “div”. These buttons are having id values as “btnOne” and “btnTwo”. Why we are adding id values?! Well, these are basics of how to access items from inside a page. Its kind of naming a new born in family Lets move on and see how we are accessing these elements.
Our javascript file looks as below

var onPageLoad = function ()
{
	 alert("Page is loaded");
	 var myBtnOne = document.getElementById('btnOne');
	 var myBtnTwo = document.getElementById('btnTwo');
	 //alert(myBtnOne+' : '+myBtnTwo);
	 
	 myBtnOne.onclick=function(){
	 	alert ('one');
	 };
	 
	 myBtnTwo.onclick=function(){
	 	alert ('two');
	 };
	 
};

Before going into the javascript, lets see our HTML code again. There is something, we did not look previously. Its

What this does ?!! To be very basic, it actually calls a javascript function named “onPageLoad()” , when all the elements on the HTMl page is loaded. That means, we can add any interactivity after the page is loaded. For, if we try to add interactivity before all elements of the page is loaded, then there is a chance javascript engine will ignore those commands which will result in wrong behavior of the page. Therefore its recommended to add functionality to a page after confirming that everything in the page is loaded and this code is exactly doing the same.
Coming to out javascript file, we have to written everything in our “onPageLoad()” function. So the first thing is taken care of, now lets move on and see what else we are doing. Upon page loaded it will “alert” a message to the user saying we are ready to start adding interactivity. Now our main ambition here is to upon clicking those two buttons, we have to alert different messages to the user. We select those button elements with the code

document.getElementById('btnOne');

Next, we have to store these values so as to refer them in our code. We do this by assigning them to a variable as

var myBtnOne = document.getElementById('btnOne');

For the second button we have to do the same thing and the code looks

 var myBtnOne = document.getElementById('btnOne');
 var myBtnTwo = document.getElementById('btnTwo');

Now we know how to access elements from an HTML page. The process is add an id value to the element in HTML page and access them with “document.getElementById(elementName)”. Thats all.
Next we are simply going to add the interactivity. Those are done with

 myBtnOne.onclick=function(){
	 	alert ('one');
	 };
myBtnTwo.onclick=function(){
	 	alert ('two');
	 };

Thats simple, but then there are libraries which make our job even simpler. JQuery is such a library, but that is for a future post.
All the sourceCode can be downloaded from here for your reference.

Hope that helps some one. I would like to listen back from you about the post, leave a comment for suggestions, mistakes or simply thanks.