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>