制作点击按钮可将输入文本添加至UL列表功能时遭遇Uncaught TypeError错误求助

嘿，我来帮你搞定这个报错问题！

你碰到的Uncaught TypeError: btn.addEventListener is not a function错误，核心原因很明确：document.getElementsByClassName()返回的是一个HTMLCollection（类数组对象），不是单个DOM元素。你直接给这个集合调用addEventListener，自然会报错——因为集合本身没有这个方法呀！

顺带一提，你获取输入框的代码var text = document.getElementsByClassName('text')也有同样的问题，后面的text.value根本取不到输入的内容，因为text也是个集合，不是单个输入框元素。

根据你的场景，这里有两种简单的解决方式，选哪个都可以：

方案1：直接取集合里的第一个元素 #

如果你的页面里只有一个带add类的按钮和一个带text类的输入框，直接通过索引[0]从集合里取出单个元素就行：

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

btn.addEventListener("click", function(){ 
    var content = document.createElement('li') 
    content.innerText = text.value 
    list.append(content) 
    // 可选：添加完清空输入框，体验更友好
    text.value = ''
})

方案2：改用querySelector获取单个元素 #

querySelector会直接返回匹配选择器的第一个元素，写法更简洁，还能避开类数组的坑，推荐用这个：

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

btn.addEventListener("click", function(){ 
    var content = document.createElement('li') 
    content.innerText = text.value 
    list.append(content) 
    // 可选：添加完清空输入框
    text.value = ''
})

如果你的页面里有多个同class的按钮或输入框，那就要遍历HTMLCollection给每个元素绑定事件，但看你的需求应该是单个元素，所以上面的方案完全够用啦。另外添加完列表项后清空输入框，用户体验会好很多，我在代码里加了这个可选操作，你可以按需保留~

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