<!DOCTYPE html>
<html>
<body>
<h1>Arrow Function</h1>
<p>The <strong>this</strong> keyword represents the Header object.</p>
<button id="btn">Click Me!</button>
<p><strong>this</strong> represents:</p>
<p id="demo"></p>
<script>
class Header {
constructor() {
this.color = "Red";
}
changeColor = () => {
document.getElementById("demo").innerHTML += this;
}
}
const myheader = new Header();
window.addEventListener("load", myheader.changeColor);
document.getElementById("btn").addEventListener("click", myheader.changeColor);
</script>
</body>
</html>