Add document getElementById onclick Event

In this article, you will see how to add onclick event on any element by selecting it using the getElementById() method in JavaScript.

getElementById() method is used to select an element by its id attribute. This method returns the element with the specified id attribute.

If there is more than one element with the same id attribute, then the first element is returned, if there is no element with the specified id attribute, then null is returned.

// select element with id = "id1"
let element = document.getElementById("id1");

To add an onclick even you can follow 2 different ways.

1. Using addEventListener() method.
2. Using onclick property.

1. Using addEventListener() method

To add an onclick event on an element, you can use addEventListener() method.

The addEventListener() method takes two arguments, the first one is the event name and the second one is the function to be executed when the event occurs.

Syntax:

element.addEventListener(eventName, function);

The eventName argument is the name of the event, for example, click.

Let's see an example for this.

// select element by id
let element = document.getElementById("id1");

element.addEventListener("click", function() {
  alert("You clicked on the element with id = id1");
});

Note: You can either pass function reference to the addEventListener() method or you can pass directly an anonymous function.

With the addEventListener() method, you can add multiple onclick events on an element.

The example below shows how to add multiple onclick events on an element.

// select element by id
let element = document.getElementById("id1");

element.addEventListener("click", function() {
  alert("You clicked on the element with id = id1");
});

element.addEventListener("click", function() {
  element.style.backgroundColor = "red";
});

2. Using onclick property

To add an onclick event on an element, you can use onclick property of the element.

Assign a function reference to the onclick property of the element to add an onclick event.

Here is an example to show this.

// select element by id
let element = document.getElementById("id1");

element.onclick = function() {
  alert("You clicked me!");
}

One thing to note is that you can't add multiple onclick events on an element using onclick property (but can be done using addEventListener).

If you want more than 1 onclick event on an element using onclick property, then the last one will be executed and the previous ones will be ignored.

// select element by id
let element = document.getElementById("id1");

element.onclick = function() {
  alert("onclick 1");
}

element.onclick = function() {
  alert("onclick 2");
}

Conclusion

document getElementById onclick events can be added using the addEventListener() method or onclick property. With addEventListener() method, you can add multiple onclick events on an element but with onclick property, you can only add 1 onclick event on an element at a time.