Animations

API

Arrays

Async

Basics

Challenges

Classes

Console

Dates

Debugging

DOM Elements

DOM Methods

DOM Navigation

DOM Properties

Event Listeners

Flow Control

Forms

Functions

Global Functions

JSON

Keywords

Libraries (3rd party)

Math

Modules

Objects

Snippets

String

Types

Widgets

Window Object

JavaScript - OnClick

The click event is easy. The click is an event - a method of just about any element of the document object.

https://www.w3schools.com/jsref/dom_obj_event.asp

1) Click this header

2) Click this paragraph

Syntax


// 1) In HTML:
<h4 class="text-danger text-center" onclick="HeaderClick();">1) Click this header</h4>
function HeaderClick()
{
    let demo1 = document.getElementById("demo1");
    demo1.innerHTML = "Header was clicked";
}


//2 - add it in js
let paragraph = document.getElementById("paragraph-click");
paragraph.onclick = function()
{
    document.getElementById("demo2").innerHTML = "Paragraph was clicked";
};

// 3) In JavaScript, using the addEventListener() method:
let btn = document.getElementById("Button1");
btn.addEventListener("click", function () { ButtonClick(); });

function ButtonClick()
{
    document.getElementById("demo3").innerHTML = "Button was clicked";
}