공군소령김도지
614
2021-07-03 09:14:25 작성 2021-07-03 09:15:27 수정됨
1
95

JS Dom 텍스트 입력(form) 질문이요.


보시는 봐와 같이 입력하면 <li> 요소가 출력되는 건데요. 

첫번째 입력 (ㅁ ㄴ ㅇ) 이후 입력창의 value가 없어진 상태에서 다시 입력하고 싶은데...

삭제가 안되고  앞선 value가 계속 쌓여요...

어떻게 안쌓이게 하나요? ㅜ 아래는 코드입니다. 


<body>
    <form id="userForm">
      <input type="text" id="userInput" />
      <input type="submit" id="userInputBtn"/>
    </form>

    <script>
      //일단 form을 가지고 온다
      var userForm = document.getElementById("userForm");
      //가져온 form에 event를 건다, event 유형은 submit 이다
      userForm.addEventListener("submit"addEvent);

      //event에 쓸 함수를 만든다
      function addEvent(e) {
        //href나 submit은 실행될시 창이 새로고침 된다. 이걸 막아야 한다.
        e.preventDefault();

        //user value를 가지고 온다
        var userInput = document.getElementById("userInput").value;

        //이제부터 가지고온 value에 html 태그를 붙여 출력을 한다.

        //li 태그 생성
        var li = document.createElement("li");

        //user value를 text형태로 변환하고 li 태그에 붙여 준다.
        li.appendChild(document.createTextNode(userInput));

        //붙여줄 위치를 설정하고 appendchild,innerHTML로 붙여준다
        document.getElementById("userForm").appendChild(li);
      }
    </script>
  </body>
0
  • 답변 1

  • 10011
    38
    2021-07-03 10:35:00 작성 2021-07-03 10:35:52 수정됨
    <script>
        //일단 form을 가지고 온다
        var userForm = document.getElementById('userForm');
        //가져온 form에 event를 건다, event 유형은 submit 이다
        userForm.addEventListener('submit', addEvent);

        //event에 쓸 함수를 만든다
        function addEvent(e) {
          //href나 submit은 실행될시 창이 새로고침 된다. 이걸 막아야 한다.
          e.preventDefault();

          //user value를 가지고 온다
          var userInput = document.getElementById('userInput');

          //이제부터 가지고온 value에 html 태그를 붙여 출력을 한다.

          //li 태그 생성
          var li = document.createElement('li');

          //user value를 text형태로 변환하고 li 태그에 붙여 준다.
          li.appendChild(document.createTextNode(userInput.value));

          //붙여줄 위치를 설정하고 appendchild,innerHTML로 붙여준다
          document.getElementById('userForm').appendChild(li);

          // input value 초기화
          userInput.value = '';
        }
      </script>
  • 로그인을 하시면 답변을 등록할 수 있습니다.