Why do I get undefined when I change from querySelector to querySelectorAll?

Question

When I change from querySelector to querySelectorAll I get undefined. I know that the spelling for the class name is correct. So, I posted the rest of the code assuming that there is something else that I must be missing.

//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>

For context, I am trying to recreate the flashcard feature from quizlet.com for practice.

Answer 1

Because .querySelectorAll() returns a node-list (an array-like container object), not an individual node. So, this line:

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

Creates a collection of all the elements with a class of form2.

Later, when you do this:

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

You are saying that you want to get the value of the collection, but the collection doesn't have a value property, individual nodes do, so the flashcard__back element gets .innerHTML of undefined.

You'll have to identify which node within the list you want by passing an index to the node-list and then you can work with properties/methods of nodes.