버튼이 작동하지 않아요 자바스크립트 – 초보주의

버튼이 작동하지 않아요 자바스크립트 – 초보주의

아래의 코드는 버튼을 누르면 교과목이 p태그로 추가되는 코드입니다. 그런데 작동하지 않아요. 왜 그럴까요?

<body>
  <div class="wrap">
    <h1>교과목</h1>
    <form>
        <input type="text" class="input">
        <button class="btn">추가</button>
    </form>
    <div class="nameList"></div>
  </div>

  <script>

    let input = document.querySelector('.input').value;
    let btn = document.querySelector('.btn');
    btn.addEventListener("click" , ()=>{
    
        var tag = document.createElement('p');
        var tagText = document.createTextNode(input);
        tag.appendChild(tagText);
        var nameList = document.querySelector('.nameList');
        nameList.appendChild(tag);
    });
  </script>
</body>

Code language: HTML, XML (xml)

이유는 두가지 입니다.

첫번째는 button 태그는 type 속성의 기본값이 submit 입니다. 그래서 폼안에서 button을 클릭하면, 폼이 전송되고 페이지가 새로고침 되어 버립니다. 때문에 정상 작동을 위해서는 button 태그 안의 속성으로 type 속성에 버튼을 넣어서 일반 버튼으로 만들어 줘야 합니다.

<button type="button" class="btn">추가</button>
Code language: HTML, XML (xml)

두번째는 버튼 클릭이 이루어질때 input태그안에 있는 값을 가져오기 위해 let input = document.querySelector('.input').value; 이부분을 이벤트리스너 블록 안쪽에 넣어줘야 합니다.

최종코드는 아래와 같습니다.

<body>
  <div class="wrap">
    <h1>교과목</h1>
    <form>
        <input type="text" class="input">
        <button type="button" class="btn">추가</button>
    </form>
    <div class="nameList"></div>
  </div>

  <script>
    let btn = document.querySelector('.btn');
    btn.addEventListener("click" , ()=>{
      let input = document.querySelector('.input').value;
      var tag = document.createElement('p');
      var tagText = document.createTextNode(input);
      tag.appendChild(tagText);
      var nameList = document.querySelector('.nameList');
      nameList.appendChild(tag);
    });
  </script>
</body>
Code language: HTML, XML (xml)

폼 안에서 버튼태그를 사용할때는 항상 type 속성을 넣어주어서 오동작이 일어나지 않도록 합시다.

Tags:

답글 남기기

1 + 14 =