console.log ne console pas la valeur d'entrée

Question

console.log ne console pas la valeur d'entrée, mais il montre que c'est là, c'est juste inadmissible pour une raison quelconque. Même avec la fonction d'alerte. Vous pouvez tester le code dans la console et vous verrez que la sortie est vraiment là, mais vide.

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> 

ss console

Answer 1

Vous obteniez la valeur lorsque le document est chargé. À ce moment, la valeur est vide. Vous devez obtenir la valeur dans votre événement click

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