进行添加到列表的输入[重复]答案

【问题标题】：Making an input that adds to a list [duplicate]进行添加到列表的输入[重复]
【发布时间】：2021-10-19 12:45:33
【问题描述】：

我正在尝试输入文本，按下按钮时会添加到 ul 列表，但我在控制台中一直出现此错误，我不知道为什么

Uncaught TypeError: btn.addEventListener is not a function at script.js:5

代码：

var text = document.getElementsByClassName('text');
var list = document.querySelector('.list');
var btn = document.getElementsByClassName('add');

btn.addEventListener("click", function(){
    var content = document.createElement('li')
    content.innerText = text.value
    list.append(content)
})

【问题讨论】：

同时提供您的 HTML 代码。
我相信 getElementsByClassName 方法会返回一个数组，这就是您遇到该错误的原因。
getElementsByClassName returns a live HTML collection。您不能将事件侦听器添加到事物列表中。
改用querySelector/querySelectorAll
使用btn[0].addEventListener 因为getElementsByClassName 返回集合，而不是您可以添加事件的单个元素。

标签： javascript html web

【解决方案1】：

您收到此错误是因为getElementsByClassName 返回具有给定类的所有元素的数组。要解决此错误，您有两种选择：

使用add id 代替class 并使用getElementById 获取该元素。

var btn = document.getElementById('add');
如果您不想创建add id，我们知道getElementsByClassName 返回一个数组，您可以通过其索引访问该数组中的元素。

var btn = document.getElementsByClassName('add')[0];

在这种情况下，请记住，您尝试使用 add 类访问的按钮应该是具有该类名的第一个元素。

【讨论】：