🛑 Why You Should Avoid the onclick Attribute in Your Code

UpdatedDecember 11, 2022

•4 min read•View as Markdown

🛑 Why You Should Avoid the onclick Attribute in Your Code

Usman Sabuwala

I am a full stack developer, YouTuber and blogger!

Comments (5)

Join the discussion

Lovepreet Singh3y ago

Yo, Wasn't aware about this. Thanks

👉 Also, Guys you react and check my latest blog. Tried to contribute for A simple project for beginners https://lovepreet.hashnode.dev/url-shorteners-a-practical-approach-mini-project

Will write more advanced Soon

Deactivated User3y ago

It's best ever! 💯💯

Md Shakib Ahmed3y ago

Thank you so much given such a piece of valuable information. it's really helpful for me! I appreciate the author of this post sharing something special. I am super excited to share that I have found Graphicly!

Graphicly is an all-in-one plugin for graphics management, image cropping, and image optimization. Graphicly lets you easily download and use images from the web,

whether you are on a website or on your WordPress site. With our powerful API, you can create customized libraries of images that integrate seamlessly into your theme’s header.

as a result of reading this post. I'm getting to save your profile in my favorite list. 🥰

Amirah Nasihah3y ago

Thanks. Understand a lot!

Raja Junaid Farooq3y ago

Thank you so much Usman for sharing great ideas. It's very helpful for me and I tried it and Boom. Keep Growing and Keep Sharing.

More from this blog

🎣 Webhooks Demystified - Get Real-Time Personal Notifications with Discord Webhooks

Hey all 👋👋 Webhooks are a powerful tool that allow applications to communicate with each other in real-time. They are often used to send notifications or updates from one system to another without requiring manual intervention. If you know the bas...

Dec 17, 20224 min read3.5K

🎣 Webhooks Demystified - Get Real-Time Personal Notifications with Discord Webhooks

🎉 Presenting Memoriez - A quick & easy journal

❔ What and Why Memoriez ❔ This is a very important question because it makes things clear as to why this app is needed. I built Memoriez because I honestly found it hard to write and maintain journal/diary entries daily. It's not easy to maintain a j...

Jul 1, 20223 min read668

🎉 Presenting Memoriez - A quick & easy journal

🗃️ How to use Mongoose with Next.js for MongoDB?

Explained with a simple project

Apr 17, 20226 min read13K

🗃️ How to use Mongoose with Next.js for MongoDB?

🎨 Sort imports using Prettier in a JavaScript Project inside VS Code!

👋 Hey developers! This post is about how you can sort import statements in your JavaScript/TypeScript/React/Node etc projects easily with Prettier in VS Code when you format the code. https://www.youtube.com/watch?v=QQWgN0_gUxI What will you achieve...

Mar 22, 20223 min read4.7K

🎨 Sort imports using Prettier in a JavaScript Project inside VS Code!

Usman Writes

30 posts

Hey all! My name is Usman! I am 17 years old and learning web development and programming. I also have a YouTube channel on the subject of programming and mostly web development.

Hey everyone! It's been a while since I wrote my last article. But here I am with another topic that might be informational to you 🙂.

This time I am writing about why you should avoid the onclick attribute in your HTML and JavaScript code.

meme - you avoiding onclick

This article is not particularly about click events but rather all events in HTML and JS. The click event is a good and easy example to explain.

First, I will try to explain the various ways to handle click events or rather any events in JavaScript.

Different Ways to Handle Click Events

There are three ways I know to handle click events in HTML and JavaScript (comment below if you know more).

1. Using the `onclick` attribute

The first way I learned was by using the onclick attribute in HTML and calling a function that was written in JavaScript.

It is maybe the easiest way to handle click events. As there is nothing complicated. Everything makes sense.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>The onclick way</title>
  </head>
  <body>
    <button onclick="whenButtonClicked()">Click me</button>
    <script>
      function whenButtonClicked() {
        alert('button clicked');
      }
    </script>
  </body>
</html>

In the code above, we create a function inside our JavaScript that we then call when the button is clicked.

It will result in something like this 👇

button is clicked and an alert is shown

2. Using the `addEventListener` function

The second way I learned was by using the addEventListener function inside JavaScript. I saw it for the first time in this tutorial.

At first, I felt this was unnecessary as the onclick felt easier. But with time and building large projects, I understood why this makes more sense.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>The onclick way</title>
  </head>
  <body>
    <button id="btn">Click me</button>
    <script>
      const btn = document.getElementById('btn');

      function whenButtonClicked() {
        alert('button clicked');
      }

      // 1. either pass the function
      btn.addEventListener('click', whenButtonClicked);
      // 2. or use anonymous function
      btn.addEventListener('click', () => {
        alert('button clicked');
      });
    </script>
  </body>
</html>

What happens here is you first select the button inside your JavaScript code with id or class etc. And then register/add an event listener called click. Then either pass the function in or use an anonymous function.

This is better because when you are going to build something large the first way, your JavaScript code will get mixed with HTML. Then maintaining your code will be very hard.

You can also remove an event listener using the removeEventListener method. By just passing in the function that was used previously.

function whenButtonClicked() {
  alert('button clicked');
}

// add event listener
btn.addEventListener('click', whenButtonClicked);
// remove event listener
btn.removeEventListener('click', whenButtonClicked);

3. Using the `onclick` property

This is by far my favourite way to handle events.

It's as straightforward as the first one.
Separated from HTML as the second one.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>The onclick way</title>
  </head>
  <body>
    <button id="btn">Click me</button>
    <script>
      const btn = document.getElementById('btn');

      function whenButtonClicked() {
        alert('button clicked');
      }

      // 1. either pass the function
      btn.onclick = whenButtonClicked;
      // 2. or use anonymous function
      btn.onclick = () => {
        alert('button clicked');
      };
    </script>
  </body>
</html>

What we do in this piece of code is that we assign the onclick attribute to a function (same as the second way).

The downside of using this method is that you cannot assign multiple event listeners. If you use addEventListener. With that, you can add multiple functions to one element. And not to mention you also cannot use something like removeEventListener

So What's Wrong with `onclick`?

Now let's come to the main section of the article.

The onclick attribute is not recommended in HTML because it is considered to be a bad practice to use inline JavaScript in your HTML code.

Instead, it is better to separate your JavaScript code from your HTML code and use event listeners to handle events in your web page. This makes your code easier to read, maintain, and reuse.

In general, it is better to avoid using the onclick attribute in HTML and to use event listeners instead, as this allows you to keep your JavaScript code separate from your HTML code and makes it easier to manage and maintain.

Additionally, using inline JavaScript in your HTML can make your code more difficult to maintain and update. If you need to change the behaviour of your web page, you will have to go through your HTML code and update all of the onclick attributes, which can be time-consuming and error-prone.

Conclusion

I hope this article helped you out and made you better!

I would love to hear your thoughts on this topic. Please share your ideas and experiences in the comments section below.

Command Palette

Comments (5)

More from this blog

Different Ways to Handle Click Events

1. Using the onclick attribute

2. Using the addEventListener function

3. Using the onclick property

So What's Wrong with onclick?

Conclusion

1. Using the `onclick` attribute

2. Using the `addEventListener` function

3. Using the `onclick` property

So What's Wrong with `onclick`?