Every time when we create some code and interact with browser there some events occur. So in java script events are very important. Events are use by a user more than a developer when they interact with web pages. So in this lesson we are started with some example of events that how they work and what of its functionality. When we done something by using of events there some function work of events is called event handler. let see an example of a onclick Event handler.
In above example first we create a box with id, its background color is blue and width and height is 100 px. After then we create a java code.
In this java code first we select div with its id and than create a onclick function by using onclick event handler and in last we change style property to background color red. Now by using of onclick event handler when we click on blue box it's change color blue to red. So this is the perfect simple example of onclick event handler.
This error is occur because when we put our java code on top of the page its run before html page download and it's not able to find id of box who it's searching of run event handling so we can put our page in bottom body of html or we can use onload event handler let see an example of onload event handler.
So why we use onload event handler and make our code large and complicated while we can put our code in end of html body and than we no need to use onload function so it's up-to you that what way you want to follow and suits you.
In above example first we set two classes for body background in style portion. Than we set a class (which one of them) into body tag. Than we create two buttons for change the background color, these both button do work for two classes which we set in style segment. In java code we create a var button for selection them by their tag names. After than we use for loop, in loop first we create a var i and set its value zero, var len = button.length, i < len, increase one value of i every time till loop is running. Then set i index into button and join this with onclick event handler and make a function for click perform.
In function we create a var myClass and set this value in it this.innerHTML.toLowerCase();
Here we use this function for button than put innerHTML for use inner property of button class than we use toLowerCase keyword. In this part ToLowerCase function is perform important part. We use this function for turn button values into lowercase than it's compare these lowercase value normal and changed with both classes and use their property's by using innerHTML function. In the last we set these properties into body for changes background and set their values into myClass. Now this is our function but there is a line which we set as a comment. Why we set this as Comment ?
We set this as a comment to show you there is a big problem, While we using onclick function its follow Dom Level Zero properties, this function can follow or perform by all browsers but in case of using this we can use onclick function only one time if we uncomment the line and use one more onclick function than our all function not work in different way we can say we can't use a onclick function into another onclick function. So how can we solve this, we learn solution in next lesson so keep in touch and continue learning the java script with us.
