DEV Community

loading...

DOM Manipulation

Muhammad Uzair
ReactJs | React-Native | JavaScript | Nodejs | MongoDB | UserInterface | Python
・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)

Forem Open with the Forem app