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

Question

当我从 querySelector 更改为 querySelectorAll 时，我得到了未定义。我知道类名的拼写是正确的。所以，我发布了其余的代码，假设我必须缺少其他东西。

//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 重新创建抽认卡功能以进行练习。

Answer 1

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

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

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

稍后，当你这样做时：

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

你是说你想得到集合的value，但是集合没有value属性，个别节点有，所以flashcard__back元素得到.innerHTML的undefined .

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