Edit in JSFiddle

JavaScript
HTML
CSS
Result

const element = document.getElementById("myBtn");

element.addEventListener("click", myFunction);

function myFunction() {
  document.getElementById("demo").innerHTML = "<h1>My Heading</h1><p>The Click Function Called</p>";
}

// anonomous function call
element.addEventListener("mouseover", function() {
  document.getElementById("demo2").innerText = "The Mouse Over Function Called";
  this.style.backgroundColor = 'red';
});

element.addEventListener("mouseout", function() {
    const el = document.getElementById("demo3");
    el.textContent = "The Mouse OUT Function Called";
    this.style.backgroundColor = 'blue';
});

<body>


<h1>The Element Object</h1>

<h2>The addEventListener() Method</h2>

<p>Execute a function when a user clicks on a button:</p>

<button class="button" id="myBtn">Try it</button>

<p id="demo" class="light"></p>
<p id="demo2" class="light"></p>
<p id="demo3" class="light"></p>

</body>

body {
  font-family: arial, sans-serif;
}

.light {
  background-color: bisque;
  padding: 20px;
  width: 200px;
  height: auto;
  text-align: center;
  vertical-align: middle;
}

.button {
  padding: 10px;
  background-color: black;
  border: none;
  outline: none;
  border-radius: 5px;
  color: white;
  cursor: pointer;
}