Click Function for Beginners

In this tutorial, I'm gonna teach you about the click function. Just a disclaimer, I'm only gonna go over the basics of using the Click Funtion as it is a very wide subject to go in-depth.

Also a small note:

You don't have to give the IDs, classes and variables the same names as I do. You can name them whatever you want, I just chose to keep my names simple

First things first, set up a HTML Document in a code editor (I use Visual Studio Code) to have 3 buttons inside the Body and give them an ID:

<button id="button1">Button 1</button>

<button id="button2">Button 2</button>

<button id="button3">Button 3</button>

Step 2:

Prepare a JS document and create variables for all the buttons. Like so:

document.addEventListener('DOMContentLoaded', ()=>{
    let button1 = document.querySelector('#button1');
    let button2 = document.querySelector('#button2');
    let button3 = document.querySelector('#button3');
})

The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

Step 3: Adding the Click Function

Now you can add the click function to one of the buttons with the following code:

button1.addEventListener('click', ()=>{
    console.log('You clicked Button 1')
})

The reason for a console.log, is to be sure that you have the right element clicked on.

And now we can add it to the 2 remaining Buttons

button2.addEventListener('click', ()=>{
    console.log('You clicked Button 2')
})

button3.addEventListener('click', ()=>{
    console.log('You clicked Button 3')
})

Step 4: Making the buttons change Background Color

To make it change Background Color, do the following:

button2.addEventListener('click', ()=>{
    button2.style.backgroundColor = 'blue'
})

This should change Button 2's Background Color to Blue

Now let's say you want to change the color back to the original color. Do the following by creating a variabel after your Buttons, like this:

let button1 = document.querySelector('#button1');
let button2 = document.querySelector('#button2');
let button3 = document.querySelector('#button3');
let isColored = false;

The reason for creating the isColored variabel, is something to have, so we can check if the button color changed

Now inside the Click Function add an if and else statment:

button2.addEventListener('click', ()=>{
    if(isColored){
        button2.style.backgroundColor = 'buttonface'
        isColored = false;        
    }else{
        button2.style.backgroundColor = 'green'
        isColored = true;
    }
})

The if statement checks if the Button has changed color. Right now it's false, so it has the Default color for the button. If you click the button it should change the color to green. If it worked, the isColored variabel is now true, meaning the color has in fact changed. If you click the button again, it should revert back to the default color ('buttonface' is the default color value for a button element)

Step 5: Working with classList.add/remove

You can also do the same with classList.add/remove. In this case would I like to add some padding and margin to one of the buttons and making the text bold. Gonna create a 4th Button for this example. Also gonna create a variable to keep track of the style, to see if it has have changed or not. Just so it doesn't mess with our other code. Let's take a look at the CSS:

.padding-margin-bold{
    padding: 10px;
    border-radius: 15px;
    margin: 10px;
    font-weight: bold;
}

Also feel free call your class whatever you like.

I've added some padding, margin, border-radius and font-weight. Now to add this class via JavaScript. Let's move on over to the JavaScript file. Make sure to have created a variabel to point at the 4th button you just created in HTML:

let styleChanged = false;
let button4 = document.querySelector('#button4');

I have used some of the same code from the example before when changing the background color, instead I'm using classList instead of style. Here is the example below:

button4.addEventListener('click', ()=>{
    if(styleChanged){
        button4.classList.remove("padding-margin-bold")
        styleChanged = false;        
    }else{
        button4.classList.add("padding-margin-bold")
        styleChanged = true;
    }
})

Now the class should be added when you click on the button and remove the class when you click on it again

Thank you for reading through my tutorial :)

Hope it helped you getting better at understanding Click Functions

Here is a link to CodePen for the full example:

https://codepen.io/jesp258/pen/VwZMeBR

Small note:

In the CodePen example above, I have unique 'false' variables for all the buttons so they don't mess with each other in the code