JavaScript onclick: Main Tips
- JavaScript onclick event attribute is a mouse event which runs a specified line of code when you click an HTML object that has the onclick attribute.
- It is applicable to all HTML elements, with the exception of the following tags:
<bdo>,<base>,<head>,<br>,<iframe>,<html>,<param>,<script>,<style>,<meta>, and<title>.
What onclick Is
Let's begin the introduction by stating that the JavaScript onclick event attribute allows you to assign scripts to HTML elements. If you are designing a website, you might want to upgrade your buttons (or another piece of content). Note that onclick attribute does not modify functions: it adds another layer of functionality to them.
For instance, if you want the text color to change once a button or another element is clicked, this can be achieved with the JavaScript onclick event attribute. In other words, after users interact with elements with the JavaScript button onclick attribute, the assigned function is invoked.
Despite being simple, the button onclick event attribute is capable of improving websites by making them more dynamic. Reassuring a satisfying user experience is a task for every website owner. Therefore, do not ignore the simple functions and attributes that might enhance websites without requiring much effort.
Proper Syntax
JavaScript on click event attribute has simple but specific syntax rules that you should try to remember:
object.onclick = function(){my_script};
You should specify the HTML element you want to enhance with some additional functionality. Also, you have to include the actual function to be applied to that element.
We also indicate the syntax of addEventListener() which can also invoke a function once an element is clicked:
object.addEventListener("click", my_script);
Note: The addEventListener() method is not supported in Internet Explorer 8 and earlier versions.
Code Examples
It is clear that JavaScript onclick function can help you achieve a lot. In this section, we introduce you to a couple of common code examples to start practicing. The first example shows how a text color can be changed after users click on it:
Now, in the example below, the text also changes color on click, but a different method is used:
Our last example shows how to use a button with a JavaScript dropdown menu element:
document.getElementById("sampleButton").onclick = () => {
sampleFunction()
};
// sampleFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content
function sampleFunction() {
document.getElementById("sampleDropdown").classList.toggle("show");
}