使用 javascript 将用户输入显示到列表中答案

【问题标题】：display user input to list using javascript使用 javascript 将用户输入显示到列表中
【发布时间】：2021-05-21 02:52:46
【问题描述】：

我正在尝试创建一个待办事项列表应用，但我似乎无法将用户数据附加到我的列表中

html:

 <div id="Html">
         <input id="input-task" placeholder="New Task" >
              <button id="add-btn" type="button" onclick="newTask()">
                    Add Tasks
              </button>
     </div>
    <div>    
    <ul id="task-table">
        <li>Task 1</li>
    </ul>
    </div>

单独的 javascript 文件：

 const inputTask = document.getElementById('input-task').value;

   
    var li = document.createElement('li');
        var t = document.createTextNode('inputTask');
        li.appendChild(t);
        document.getElementById('task-table').appendChild(li);
}

【问题讨论】：

标签： javascript html list

【解决方案1】：

inputTask 是包含文本值的变量，但您将其当作字符串使用，请删除它周围的引号。

我还建议您避免使用内联事件处理程序，您可以使用addEventListener() 代替，如下所示：

document.getElementById('add-btn').addEventListener('click', newTask);

function newTask(){
  const inputTask = document.getElementById('input-task').value;

  var li = document.createElement('li');
  var t = document.createTextNode(inputTask); //remove quotes here
  li.appendChild(t);
  document.getElementById('task-table').appendChild(li);
}

<div id="Html">
  <input id="input-task" placeholder="New Task" >
  <button id="add-btn" type="button">
    Add Tasks
  </button>
</div>
<div>    
  <ul id="task-table">
    <li>Task 1</li>
  </ul>
</div>

【讨论】：

感谢您的帮助...所以最好在您使用的函数中设置变量？？

【解决方案2】：

试试这样。您应该调用 newTask 函数并在其中添加 child。

const inputTask = document.getElementById('input-task').value;

function newTask(){
    var li = document.createElement('li');
    var t = document.createTextNode(document.getElementById('input-task').value);
    li.appendChild(t);
    document.getElementById('task-table').appendChild(li);
    document.getElementById('input-task').value="";
}

<div id="Html">
     <input id="input-task" placeholder="New Task" >
          <button id="add-btn" type="button" onclick="newTask()">
                Add Tasks
          </button>
 </div>
<div>    
<ul id="task-table">
    <li>Task 1</li>
</ul>
</div>

【讨论】：

非常感谢......所以我的第一个 const inputTask 变量没有进入 newTask 函数？
当页面加载时，变量 inputTask 将被初始化为空字符串。而且它永远不会更新。所以你应该在 newTask() 函数中获取值。

【解决方案3】：

您的代码没有问题！简单修复了这一行

var t = document.createTextNode('inputTask');

删除（''引号）

var t = document.createTextNode(inputTask);

我不知道的最后一件事可能是你已经这样做了，但我想提一下将此代码包装在 newTask() 函数中示例：-

function newTask(){
  const inputTask = document.getElementById('input-task').value;   
  var li = document.createElement('li');
  var t = document.createTextNode(inputTask);
  li.appendChild(t);
  document.getElementById('task-table').appendChild(li);
}

【讨论】：