Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Why is using onClick() in HTML a bad practice?
In this tutorial, we will learn why using onClick() in HTML is a bad practice.
There are events and methods in JavaScript to handle the actions like clicking, hovering, etc. The onClick() is the most used method that executes a function on clicking an element. This method is applied to the element as its attribute. It may contain the name of the function or the script itself.
JavaScript also contains the addEventListener method used to execute a function on the occurrence of an event. There are many ways to execute events, and every way has advantages and disadvantages.
So, Let us look at why using onClick() in HTML is a bad practice.
Using onClick() in HTML a bad practice
The onClick() in HTML is a method provided in the element as an attribute. Its value can be a JavaScript function or a script executed after the click event occurred on that element. But this method has some disadvantages, which is why it is considered a bad practice.
Following are the reasons that make onClick() in HTML a bad practice −
Decreases the readability of the code
Using the onClick() method in an HTML element decreases the readability of the code and makes it hard to manage. This function accepts JavaScript as its value, which may be the function's name or the script itself. So, when looking for code that uses JavaScript, we have to look at all the elements that consist of the onClick() methods. That makes the program harder to understand.
The function should be created globally
If we have declared a function inside the onClick() method for an element, then the function should be created globally in JavaScript. Creating the global function for every element using onClick() creates pollution of the global statements that should be avoided. After creating multiple global statements, it becomes hard to get which function belongs to which element.
Causes performance degradation
The onClick() method even can affect the performance of the program. Declaring elements with an onClick() method creates many global functions that take time to execute. The more element with onClick() you add, the more time it takes to execute the program.
Users can follow the below syntax to see how the onClick() method is used −
Syntax
<button onclick="func()"> </button>
<script>
function func(){
<Write the program here>
}
</script>
Follow the above syntax to the onclick() method.
Example
We have used the onclick method in the example below on every document element. It will execute the function by clicking an element. That's why there are four functions created in the script. Each function will execute for clicking a single element. But, this program is hard to read and maintain because we have to find the element with the specified function name to change the code. Every function declared is global and can also behave unexpectedly under certain conditions. Also, it increases the time of the program if the functions keep increasing.
<html>
<body>
<h2 onclick="func3()"> Using <i> onClick() method </i> to execute on onclick event on element </h2>
<p onclick="func1()"> This is Demo Text! </p>
<input type="text" id="Text" name="Text" value="" onclick="func()" />
<button onclick="func2()"> Click me </button>
<p id="para"> </p>
</body>
<script>
document.getElementById('para').style.color = "red";
function func() {
document.getElementById('para').innerHTML = 'Clicked on a input field';
}
function func1() {
document.getElementById('para').innerHTML = 'Clicked on a paragraph';
}
function func2() {
document.getElementById('para').innerHTML = 'Clicked on a button';
}
function func3() {
document.getElementById('para').innerHTML = 'Clicked on a heading';
}
</script>
</html>
In the above example, users can see that we have used the onclick method to execute a function on clicking an element. Try to click on the text, “This is Demo Text!”, input field, and button “Click me” to execute the onclick event.
Alternative for onClick() Method
If you are using onClick() on a single element from a document, there is no problem. But, if you have to add a click event on various elements using addEventListener is a better way instead. The addEventListener takes two arguments one of them is the event has to be added, and the second is the function or its name. We can add all events inside the first argument of the addEventListener method.
All the users can follow the syntax to use addEventListener in JavaScript −
Syntax
var element = document.getElementById( <Enter element Id> );
element.addEventListener("click", func);
function func(){
<Your script here>
}
Follow the above syntax to addEventListener in JavaScript.
Example
In the example, we have used the addEventListener() method to execute a function on clicking an element. We will take an input of a string from the user and break it into an array to arrange them in ascending and descending order using a sort() method.
<html>
<body>
<h2> Using <i> addEventListener method </i> to execute click event </h2>
<label for="input"> Add a string: </label>
<input type="text" id="input" name="Input" value="" />
<button id="btn"> Submit </button>
<p id="para" style="color: red;"> </p>
<p id="para1" style="color: red;"> </p>
<script>
document.getElementById("btn").addEventListener("click", () => {
var value = document.getElementById('input').value;
var array = value.split('');
var sort = array.sort();
document.getElementById('para').innerHTML = "After sorting in ascending order: " + sort;
var rsort = array.sort().reverse();
document.getElementById('para1').innerHTML = "After sorting in decending order: " + rsort;
})
</script>
</body>
</html>
In the above example, users can see that we have used the addEventListener method to execute the click events in JavaScript on clicking an element.
In this tutorial, we have learned why using onClick() in HTML is a bad practice and its alternative for a click event.
5K+ Views
