Html which button was clicked

Like Article. Get the ID of the clicked button. Previous jQuery click with Examples. Next How React Native works? Recommended Articles. Toggle class by adding the class name when element is clicked and remove when clicked outside. How to increase the width of a div by specified pixels once it is clicked using jQuery? Article Contributed By :. Easy Normal Medium Hard Expert. Writing code in comment?

Please use ide. Load Comments. What's New. Sign up or log in Sign up using Google. Sign up using Facebook. Sign up using Email and Password. Post as a guest Name. Email Required, but never shown. The Overflow Blog. Podcast Explaining the semiconductor shortage, and how it might end. Does ES6 make JavaScript frameworks obsolete? Featured on Meta. Now live: A fully responsive profile. Visit chat. Related Hot Network Questions. In this tutorial, we are going to explore the two different ways of executing click events in JavaScript using two different methods.

First, we'll look at the traditional onclick style that you do right from the HTML page. The onclick event executes a certain functionality when a button is clicked. This could be when a user submits a form, when you change certain content on the web page, and other things like that. Note that the onclick attribute is purely JavaScript. The value it takes, which is the function you want to execute, says it all, as it is invoked right within the opening tag. In JavaScript, you invoke a function by calling its name, then you put a parenthesis after the function identifier the name.

I have prepared some basic HTML with a little bit of styling so we can put the onclick event into real-world practice. So, on the web page, this is what we have:.

Our aim is to change the color of the text to blue when we click the button. So we need to add an onclick attribute to our button, then write the JavaScript function to change the color. The function we want to execute is changeColor. Then you store the value in a variable.

In this tutorial, I will be using querySelector because it is more modern and it's faster. I will also be using const to declare our variables instead of let and var , because with const , things are safer as the variable becomes read-only.

Now that we have the text selected, let's write our function. In JavaScript, the basic function syntax looks like this:. This is followed by what you want to change, which might be the color, background color, font size, and so on. So, inside our function, we take the name variable we declared to get our freeCodeCamp text, then we change the color to blue.

This time around, the onclick functions in our HTML take the values of the color we want to change the text to. These are called parameters in JavaScript. So, let's select our freeCodeCamp text and write the function to change its color to blue, green, and orange-red:.

The block of code in the function takes the name variable where we stored our freeCodeCamp text , then set the color to whatever we passed into the changeColor functions in the HTML buttons.

In JavaScript, there are multiple ways of doing the same thing. You can also do this with onclick, but lets take another approach here. This time around in our script, we need to select the button too not just the freeCodeCamp text. We can also separate our function totally from the eventListener and our functionality will still remain the same:.