HTML onclick Event Attribute

HTMLWeb DevelopmentFront End Technology

The HTML onclick attribute is triggered when you mouse click on an HTML element in an HTML document.

Syntax

Following is the syntax −

<tagname onclick=”script”></tagname>

Example

Let us see an example of HTML onclick event Attribute −

Live Demo

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   body {
      color: #000;
      height: 100vh;
      background-color: #FBAB7E;
      background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
      text-align: center;
      padding: 20px;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
   }
   .show {
      font-size: 1.2rem;
   }
</style>
</head>
<body>
<h1>HTML onclick Event Attribute Demo</h1>
<button class="btn" onclick='clickFn()'>Click me</button>
<div class="show"></div>
<script>
   function clickFn() {
      var msg = document.querySelector('.show');
      msg.innerHTML = "";
      msg.innerHTML = "Hey! you clicked me";
   }
</script>
</body>
</html>

Output

Click on “Click me” button to triggered mouse click event on it.

raja
Published on 24-Sep-2019 12:07:10
Advertisements