JavaScript - Left Click Event

Implementing the left-click event in JavaScript is straightforward with a simple code example.

In HTML, to target the element to be clicked, specify the 'id' attribute as 'target' within a <div> tag.

<div id="target">0</div>

In CSS, set the desired size for the target of the click, and customize the appearance.

Use 'cursor: pointer' to change the mouse cursor when hovering.
Additionally, prevent text selection during the click event with 'user-select: none'.

#target {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	padding: 10px;
	color: white;
	width: 250px;
	height: 250px;
	border-radius: 50%;
	text-align: center;
	cursor: pointer;
	user-select: none;
	transition: 1s;
	font-size: 40px;
	background: #0000cd;
}

To select the target element, use querySelector(), and then implement the click event using addEventListener().
Additionally, increment the value inside the target element by +1 during the click event.

// Implement the left-click event
document.querySelector('#target').addEventListener('click', () => {
	// Increment the value inside the target element by +1
	document.querySelector('#target').textContent++;
	console.log('click!');
});