console.log가 입력 값을 콘솔 아웃하지 않음

Question

console.log는 입력 값을 콘솔에 출력하지 않지만 표시되어 있음을 보여줍니다. 이는 어떤 이유로 든 허용됩니다. 경고 기능과 동일합니다. 콘솔에서 코드를 테스트하면 출력이 실제로 표시되지만 비어있는 것을 확인할 수 있습니다.

코드 :

(function() { 
var button = document.getElementsByTagName("button"); 
var userInput = document.getElementById("user_input").value; 
button[0].addEventListener("click", function() { 
    console.log(userInput); 
}, false); 

})(); 

HTML :

<form> 
    <input id="user_input" type="text" placeholder="add new task"> 
    <button type="button"> 
     <!-- SVG add icon--> 
     <svg class="add_symbol" xmlns="http://www.w3.org/2000/svg" viewBox="1197.5 116.5 18 18"> 
      <defs> 
      <style> 
       .cls-1, .cls-2 { 
       fill: none; 
       } 

       .cls-1 { 
       stroke: #fff; 
       } 

       .cls-2 { 
       stroke: #fcfeff; 
       } 
      </style> 
      </defs> 
      <g id="Group_3" data-name="Group 3" transform="translate(890 21)"> 
      <line id="Line_4" data-name="Line 4" class="cls-1" y2="18" transform="translate(316.5 95.5)"/> 
      <line id="Line_5" data-name="Line 5" class="cls-2" y2="18" transform="translate(325.5 104.5) rotate(90)"/> 
      </g> 
     </svg> 

    </button> 
    </form> 

콘솔 SS

Answer 1

문서가로드 될 때 값을 받고 있었다. 이 때 값은 비어 있습니다. 당신은 당신의 HTML에서`user_input`은 무엇 당신의 클릭 이벤트

(function() { 
 
    var button = document.getElementsByTagName("button"); 
 
    var userInput = document.getElementById("user_input"); //Get only the element 
 
    button[0].addEventListener("click", function() { 
 
    console.log(userInput.value); //Get the value 
 
    }, false); 
 

 
})();

<form> 
 
    <input id="user_input" type="text" placeholder="add new task"> 
 
    <button type="button"> 
 
     <!-- SVG add icon--> 
 
     <svg class="add_symbol" xmlns="http://www.w3.org/2000/svg" viewBox="1197.5 116.5 18 18"> 
 
      <defs> 
 
      <style> 
 
       .cls-1, .cls-2 { 
 
       fill: none; 
 
       } 
 

 
       .cls-1 { 
 
       stroke: #fff; 
 
       } 
 

 
       .cls-2 { 
 
       stroke: #fcfeff; 
 
       } 
 
      </style> 
 
      </defs> 
 
      <g id="Group_3" data-name="Group 3" transform="translate(890 21)"> 
 
      <line id="Line_4" data-name="Line 4" class="cls-1" y2="18" transform="translate(316.5 95.5)"/> 
 
      <line id="Line_5" data-name="Line 5" class="cls-2" y2="18" transform="translate(325.5 104.5) rotate(90)"/> 
 
      </g> 
 
     </svg> 
 

 
    </button> 
 
</form>