DEV Community

loading...

DOM Manipulation

uzairsamad profile image Muhammad Uzair ・1 min read

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;
     });
   });

Discussion (0)

pic
Editor guide