Javascript 为什么从querySelector更改为querySelectorAll时未定义？

当我从querySelector更改为querySelector时，我将得到未定义。我知道这个类名的拼写是正确的。因此，我发布了代码的其余部分，假设我肯定遗漏了其他内容

//采用输入形式并将文本放置在卡上
var input1=document.querySelector（'.form1'）；
var input2=document.querySelectorAll（'.form2'）；
var textOnCard=document.getElementById（'btn'）；
btn.addEventListener（'click'，function（）{
document.getElementById（'flashcard\uuuu front'）。innerHTML=input1.value
document.getElementById（'flashcard\uu back'）。innerHTML=input2.value
});
//允许卡旋转的功能
var flashcard=document.querySelector（'.flashcard'）；
flashcard.addEventListener（'click'，function（）{
flashcard.classList.toggle（'flip'）；
});
//创建一个新的输入字段
变量inputtml='+'+'+'+''''+''
var addInputField=document.getElementById（'addInputField'）；
addInputField.addEventListener（'单击'，函数（）{
textOnCard.insertAdjacentHTML（“afterend”，inputtml）
});
//在屏幕上制作数组apppear
var flashcardFront=[]；
var flashcardBack=[]；
var数=0；
var rightArrow=document.getElementById（'rightArrow'）；
var leftArrow=document.getElementById（'leftArrow'）；
textOnCard.addEventListener（'click'，function（）{
flashcardFront.push（输入1.value）；
flashcardBack.push（输入2.value）；
flashcard__front.innerHTML=flashcardFront[0]；
flashcard__back.innerHTML=flashcardBack[0]；
log（Array.from（input1））；
})
rightArrow.addEventListener（'click'，函数（）{
如果（数字flashcardFront.length&&number>flashcardBack.length）{
数字--；
}否则{
数字=0
}
控制台日志（编号）；
document.getElementById（'flashcard\uuuu front'）。innerHTML=flashcardFront[number]；
document.getElementById（'flashcard__-back'）。innerHTML=flashcardBack[number]；
});

提交
添加新的输入
因为
.queryselectoral（）
返回节点列表（类似于数组的容器对象），而不是单个节点。因此，这一行：

var input2 = document.querySelectorAll('.form2');

使用
form2
类创建所有元素的集合

稍后，当您执行此操作时：

document.getElementById('flashcard__back').innerHTML = input2.value

您的意思是希望获取集合的
值
，但是集合没有
值
属性，每个节点都有属性，因此
flashcard\u back
元素获取
的
.innerHTML

您必须通过向节点列表传递索引来确定列表中需要的节点，然后才能使用节点的属性/方法
 因为
.querySelectorAll（）
返回的是节点列表，而不是单个节点。您必须通过向节点列表传递索引来确定列表中需要的节点，然后才能使用节点的属性/方法。