Last Updated:

Simple examples of "Onclick" in javascript

Our guide will help you understand the functionality of onclick () – an event handler. For better assimilation of the material, we will give some simple examples. You'll learn about their pros and cons, as well as how jQuery works with events.

Assign event handlers

Before proceeding to practice, you need to study the theory. Almost all sites on their web pages process scripts. As a rule, these are different events. For all of them to work for them, you need to install a handler.

All handlers according to the rules of spelling contain in the name "on+ the name of the event", which is observed in onclick (). Depending on the specific event, processing will occur due to various actions. That is, when using onclick (), only those events that are caused by the left mouse click will be executed.

Examples of event handler assignment

Currently, there are several ways to embed a handler for specific events in your code.

Simple events

Consider a simple option, which is based on the implementation of onclick ()directly into the html-markup. It looks like this:

<! DOCTYPE HTML>
<html>
<head>
<metacharset="utf-8">
</head>
<body>
<input type="button" onclick="alert('Click-click!')" value="Click me and see what happens." />
</body>
</html>

When you click on the left mouse button, the message "Click-click!" pops up. It is important not to forget about this small but essential detail: only single quotation marks ('') should be used inside the alert.
In addition, in this case, the word this can be used, which refers to the current element and provides it with all available methods.

<buttononclick="alert (this.innerHTML='Click!')" >Click me</button>

This line of code creates a button with the text Click Me. As a result, a message will pop up on the screen: "'Click!". It will replace the original name of the button.

This is the easiest method that can only be used for such tasks, that is, by executing simple commands or displaying messages.

If you need to use cyclical constructions, tags, and so on, this method will not work, as it will reduce the readability of the code, making it sloppy and cumbersome. In this case, it is better to resort to functions.

Working with functions

 

With the help of functions, you can separate the necessary code into a separate block, which as a result can be called through an event handler in the html markup.

Consider an example of an application to output the resulting number in different degrees: from the first to the fifth. To do this, the countPow () function was used. Examples can be passed into it. In the following application, the user must specify a number as a function variable. So, through the handler associated with the function, calculations were made and displayed on the screen.

<! DOCTYPE HTML>
<html>
<head>
<metacharset="utf-8">

<script>
varresult=1;
functioncountPow(n) {
for(var i=1; i<=5; i++) {
result*=n;
alert("To " + i +"-th power the result is: "+ result);
}
}
</script>
</head>
<body>
<inputtype="button" onclick="countPow(3)" value="Learn 5 powers of a number!" />
</body>
</html>

This method is in demand among developers. But it's not the most popular, as it's not always convenient to bind events this way. Sometimes the best solution to the problem is to provide a flexible binding of objects to events, applying their properties. .

DOM Element Properties (DocumentObjectModel)

 

The DOM is the main tool for performing various manipulations and changes on page elements. Because the DOM is a hierarchical tree, certain methods and properties of Web page objects can be accessed by pushing through specific branches.

Consider an example - the background color changes from standard to blue. Traverse the document.body.style.backgroundColor chain.

<! DOCTYPE HTML>
<html>
<head>
<metacharset="utf-8">
</head><body>

<inputtype="button" id="button" value="Button" />
<script>
button.onclick = function() {
document.body.style.backgroundColor = 'blue';
};
</script>

</body>
</html>

Using the jQuery Library

 

With the advent of this library, many additional commands, methods and properties began to be used, which significantly reduce and simplify the written code. Developers most commonly use properties to retrieve a specific item by its identifier (document.getElementById (iden)), name (document.getElementsByName (name)), or tag (elem.getElementsByTagName (tag)).

For clarity, here is another example:

<! DOCTYPE HTML>
<html>
<head>
<title>Working with jQuery</title>
<metacharset="utf-8">
</head>
<body>

<p id="zona">Beware! If you click on the button, there will be changes with this content.</p>

<buttononclick="SupperButton()">Take a chance, click me!</button>

<script>
functionSupperButton() {
document.getElementById("zone").innerHTML = "Well done! You passed the test of courage! ";
document.getElementById("zona").style.color = 'red';

document.getElementById("zona").style.fontSize = '32px';
}
</script>

</body>
</html>

If you delve into everything, you will understand that there is nothing complicated here. Don't forget to leave comments if something was not clear to you or share your experience.