当我从querySelector更改为querySelectorAll时，为什么会出现未定义？ [重复]

Question

这个问题在这里已有答案：

• What do querySelectorAll and getElementsBy* methods return? 9个答案

当我从querySelector更改为querySelectorAll时，我得到了undefined。我知道类名的拼写是正确的。所以，我发布了剩余的代码，假设还有其他一些我必须要遗漏的东西。

//TAKES INPUT FORM AND PLACES TEXT ON CARD
var input1 = document.querySelector('.form1');
var input2 = document.querySelectorAll('.form2');
var textOnCard = document.getElementById('btn');

btn.addEventListener('click', function() {
  document.getElementById('flashcard__front').innerHTML = input1.value
  document.getElementById('flashcard__back').innerHTML = input2.value
});


//FUNCTION THAT ALLOWS CARD TO ROTATE
var flashcard = document.querySelector('.flashcard');

flashcard.addEventListener('click', function() {
  flashcard.classList.toggle('flip');
});


//CREATES A NEW INPUT FIELD
var inputHtml = '<div class="container mt-5"><div class="row"><div class="col-lg-12 text-center"><form id="form" action=""><div><input type="text" class="form1">'+ ' ' + '<input type="text" class="form2">' + ' ' + '</div></form></div></div>'

var addInputField = document.getElementById('addInputField');

addInputField.addEventListener('click', function() {
  textOnCard.insertAdjacentHTML("afterend", inputHtml)
});


//make array apppear on screen

var flashcardFront = [];
var flashcardBack = [];

var number = 0;

var rightArrow = document.getElementById('rightArrow');
var leftArrow = document.getElementById('leftArrow');


textOnCard.addEventListener('click', function(){

  flashcardFront.push(input1.value);
  flashcardBack.push(input2.value);

  flashcard__front.innerHTML = flashcardFront[0];
  flashcard__back.innerHTML = flashcardBack[0];

  console.log(Array.from(input1));

})


rightArrow.addEventListener('click', function(){
  if (number < flashcardFront.length - 1 && number < flashcardBack.length - 1){
    number++;
  } else {
    number = 0
  }
  console.log(number);
  document.getElementById('flashcard__front').innerHTML = flashcardFront[number];
  document.getElementById('flashcard__back').innerHTML = flashcardBack[number];

});



leftArrow.addEventListener('click', function(){
  if (number > flashcardFront.length && number > flashcardBack.length){
    number--;
  } else {
    number = 0
  }
  console.log(number);
  document.getElementById('flashcard__front').innerHTML = flashcardFront[number];
  document.getElementById('flashcard__back').innerHTML = flashcardBack[number];

});

<div class="container mt-5">
  <div class="row">
    <div class="col-lg-12 text-center">
      <input type="text" class="form1">
      <input type="text" class="form2">
      <button class="btn btn-primary text-center" id="btn">SUBMIT</button>
    </div>
  </div>
</div>


<div class="container mt-5">
  <div class="row">
    <div class="col-lg-12 text-center">
      <input type="text" class="form1">
      <input type="text" class="form2">
    </div>
  </div>
</div>



<div class="container">
  <div class="row">
    <div class="col-lg-12 text-center">
      <button class="btn btn-primary" id="addInputField">ADD A NEW INPUT</button>
    </div>
  </div>
</div>


<div class="container mt-5">
  <div class="row">
    <div class="col-lg-12">
      <div class="flashcard">
        <div class="flashcard__side flashcard__side--front">
          <h1 id="flashcard__front" class="text-center m-3"></h1>
        </div>
        <div class="flashcard__side flashcard__side--back">
          <h1 id="flashcard__back" class="text-center m-3"></h1>
        </div>
      </div>
    </div>
  </div>
</div>



<div class="container mt-5">
  <div class="row">
    <div class="col-lg-12">
      <h3 id="testField" class="pl-5"></h3>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <i class="fas fa-arrow-left" id="leftArrow"></i>
    </div>
    <div class="col-md-6">
      <i class="fas fa-arrow-right" id="rightArrow"></i>
    </div>
  </div>
</div>

对于上下文，我试图从quizlet.com重新创建flashcard功能进行练习。

Answer 1

因为.querySelectorAll()返回一个节点列表（一个类似数组的容器对象），而不是一个单独的节点。所以，这一行：

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

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

后来，当你这样做：

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

你说要获得该集合的value，但该集合没有value属性，各个节点都有，所以flashcard__back元素获得.innerHTML的undefined。

您必须通过将索引传递给节点列表来确定列表中的哪个节点，然后您可以使用节点的属性/方法。