当我使用按钮单击事件检索时，为什么我的输入值等于 ''？答案

【问题标题】：Why is my input value equal '' when I retrieved with a button click event?当我使用按钮单击事件检索时，为什么我的输入值等于 ''？
【发布时间】：2022-01-27 20:25:30
【问题描述】：

为什么activityInput.value 总是等于一个空字符串。这看起来很简单，我觉得问这么简单的事情很愚蠢，但我无法让它发挥作用。请帮帮我！

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

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

【问题讨论】：

您的 ID 有错字：应该是 document.getElementById('activityListInput')

标签： javascript html forms events textinput

【解决方案1】：

我似乎找不到应该有的地方

activityInput.value

你只有一个

activityListInput.value

这个 html 文件应该可以工作并显示“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>

【讨论】：