JavaScript Code

How to set onclick listener for a div using JavaScript?

Tutorials using JS

Problem Statement

set onclick listener function for a div element using JavaScript

Solution

to set onclick listener for a div element using JavaScript, we can use Element.addEventListener() method. get the div element, call addEventListener() on the div element, and pass "click" value for first argument, and a function for second argument

divElement.addEventListener("click", someFunction);

when user performs click action on the div element divElement, someFunction() will be called

Program

in the HTML code, we have a div element with id myDiv. when user clicks on this div element, we set to call the function addParagraphToDiv()

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Tutorial</h1>
<h2>Add On-click Listener</h2>
<button id="myBtn">Click me</button>
<div id="myDiv"></div>

<script>
//set onclick listener for #myBtn
document.getElementById("myBtn").addEventListener("click", function() {
	//get div element
	const myDiv = document.getElementById("myDiv");
	//add paragraph to div element
    myDiv.innerHTML += "<p>Hello World</p>";
});
</script>

</body>
</html>

Copyright @2022