Why is my input value equal '' when I retrieved with a button click event?

Question

Why does the activityInput.value always equal an empty string. This seems very simple, I feel stupis asking something so simple but I cant get it to work. Please help me!

 <div id = "activityListContainer">
      
          <input type ="text"  class = "input" value = '' id = "activityListInput"  name = "activityListInput" >
          <label for = 'activityListInput'></label>
          <button  class = "button" id = "activitySubmit">
              submit activity
          </button>
    
        <div id = 'activityList' ></div>
</div>


function addActivityListEntry(){
    
  let activityListContainer = document.getElementById('activityList');
       let newActivity = document.querySelector("#activityListInput").value
       console.log(newActivity)
 };

let activitySubmitButton = document.getElementById('activitySubmit');
activitySubmitButton.addEventListener('click', e => {
  e.preventDefault();
  addActivityListEntry()
 })

Answer 1

I can't seem to find where there should be an

activityInput.value

all you have is an

activityListInput.value

This html file should work and shows the logs for "activityListInput"

 <!DOCTYPE html>
<head></head>
<body>
    
    <div id = "activityListContainer">
        
    <input type ="text"  class = "input" value = '' id = "activityListInput"  name = "activityListInput" >
    <label for = 'activityListInput'></label>
    <button  class = "button" id = "activitySubmit">
        submit activity
    </button>
    
    <div id = 'activityList' ></div>
</div>

</html>
<script>
    function addActivityListEntry(){
    
    let activityListContainer = document.getElementById('activityList');
         let newActivity = document.querySelector("#activityListInput").value
         console.log(newActivity)
   };
  
  let activitySubmitButton = document.getElementById('activitySubmit');
  activitySubmitButton.addEventListener('click', e => {
    e.preventDefault();
    addActivityListEntry()
   })
</script>
</body>

Why is my input value equal '' when I retrieved with a button click event?

Question

1 answers

solution1
0 2022-01-22 15:21:28

Why is my input value equal '' when I retrieved with a button click event?

Question

1 answers

solution1 0 2022-01-22 15:21:28

solution1
0 2022-01-22 15:21:28