console.log tröstet keinen Eingabewert

Question

console.log tröstet den Eingabewert nicht, aber es zeigt, dass es da ist, es ist aus irgendeinem Grund nur zulässig. Gleiches mit der Alarmfunktion. Sie können den Code in der Konsole testen, und Sie werden sehen, dass die Ausgabe wirklich da ist, aber leer ist.

Code:

(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> 

Konsole ss

Answer 1

Sie wurden den Wert bekommen, wenn das Dokument geladen ist. Zu diesem Zeitpunkt ist der Wert leer. Sie müssen den Wert in Ihrem Klick-Ereignis

(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>