DOM 작업

1278 단어 htmlcssjavascript
이 작업에서 HTML 단추를 만들고 자바스크립트로 조작하라는 메시지를 받았습니다.
버튼의 초기 텍스트 레이블은 0입니다.버튼을 클릭할 때마다 버튼이 1씩 증가해야 합니다.다시 생각해 보십시오. 단추의 텍스트 탭은 JS 대상의 innerHTML 속성입니다.

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

좋은 웹페이지 즐겨찾기