How to change HTML text using JavaScript DOM

#addeventlistener #javascript

Html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello, World!</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
      <button type="submit" id="btn">click here to show time  </button>
      <p id="t"></p>
      <script src="script.js"></script>
  </body>
</html>

javaScript

document.addEventListener('DOMContentLoaded',function()
{
  const btn = document.getElementById('btn');

  btn.addEventListener('click', function(){


    OnChange();

  });

});

function OnChange(){
      document.getElementById('t').innerHTML=Date();


}

style css

body{
  padding: 25px;
}
.title {
    color: #5C6AC4;
}
#btn{
  background-color:orange;
  border: none;
  border-radius: 12px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;

}
#btn:hover{

   background-color: #04AA6D; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
p{
  font-size: 24px;
 color: blue;
}