DOM Manipulation

#javascript #html #css

In this task I was told to create a HTML Button and manipulate it with my javascript.
The button's initial text label is 0. After each click, the button must increment by 1. Recall that the button's text label is the JS object's innerHTML property.

html

       <html>
           <head>
              <link rel="stylesheet" href="css/button.css" 
              type="text/css">
              <meta charset="utf-8">
              <title>Button</title>
          </head>
         <body> 
           <button id='btn' >0</button>
           <script src="js/button.js" type="text/javascript"> 
           </script>
          </body>
    </html>

css

     #btn{
           width:96px;
           height:48px;
           font-size:24px;
          }

js

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

 button.addEventListener('click', (e) => {
      const count = Number(e.currentTarget.innerText) + 1;

      e.currentTarget.innerText = count;
     });
   });