使用JavaScript创建待办列表点击按钮无响应问题求助

你的待办列表代码点击按钮无反应，主要是两个细节错误导致的，咱一个个说清楚：

1. DOM方法拼写错误（大小写问题） #

JavaScript是严格区分大小写的，你代码里写的getElementbyId是错误写法，正确的应该是getElementById（注意by里的B要大写）。这个错误会直接导致浏览器找不到这个方法，函数执行到这里就报错终止，后面的逻辑自然没法运行。

2. 模板字符串语法错误 #

你用双引号包裹了<li> ${input.value} </li>，但ES6的变量插值${}语法只能在**反引号（）包裹的模板字符串**中生效。用双引号的话，${input.value}`会被当成纯文本插入，而不是实际的输入内容。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<body>
<input type="text" placeholder="Enter Task Here" id="input">
<button onclick="myFunction()">Add Task</button>
<script>
function myFunction() {
 const input = document.getElementById('input');
 const list = document.getElementById('list');
 let item = `<li> ${input.value} </li>`;
 input.value = '';
 list.insertAdjacentHTML('beforeend', item);
}
</script>
<ul id="list">
</ul>
</body>
</html>

现在点击按钮就能正常把输入的任务添加到列表里，同时清空输入框啦～

内容的提问来源于stack exchange，提问作者chibiw3n