title: Why do I get undefined when I change from querySelector to querySelectorAll?
body: <p>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. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//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 = '&lt;div class="container mt-5"&gt;&lt;div class="row"&gt;&lt;div class="col-lg-12 text-center"&gt;&lt;form id="form" action=""&gt;&lt;div&gt;&lt;input type="text" class="form1"&gt;'+ ' ' + '&lt;input type="text" class="form2"&gt;' + ' ' + '&lt;/div&gt;&lt;/form&gt;&lt;/div&gt;&lt;/div&gt;'
  
  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 &lt; flashcardFront.length - 1 &amp;&amp; number &lt; 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 &gt; flashcardFront.length &amp;&amp; number &gt; flashcardBack.length){
      number--;
    } else {
      number = 0
    }
    console.log(number);
    document.getElementById('flashcard__front').innerHTML = flashcardFront[number];
    document.getElementById('flashcard__back').innerHTML = flashcardBack[number];
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container mt-5"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-lg-12 text-center"&gt;
        &lt;input type="text" class="form1"&gt;
        &lt;input type="text" class="form2"&gt;
        &lt;button class="btn btn-primary text-center" id="btn"&gt;SUBMIT&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class="container mt-5"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-lg-12 text-center"&gt;
        &lt;input type="text" class="form1"&gt;
        &lt;input type="text" class="form2"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-lg-12 text-center"&gt;
        &lt;button class="btn btn-primary" id="addInputField"&gt;ADD A NEW INPUT&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class="container mt-5"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-lg-12"&gt;
        &lt;div class="flashcard"&gt;
          &lt;div class="flashcard__side flashcard__side--front"&gt;
            &lt;h1 id="flashcard__front" class="text-center m-3"&gt;&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div class="flashcard__side flashcard__side--back"&gt;
            &lt;h1 id="flashcard__back" class="text-center m-3"&gt;&lt;/h1&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  &lt;div class="container mt-5"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-lg-12"&gt;
        &lt;h3 id="testField" class="pl-5"&gt;&lt;/h3&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-6"&gt;
        &lt;i class="fas fa-arrow-left" id="leftArrow"&gt;&lt;/i&gt;
      &lt;/div&gt;
      &lt;div class="col-md-6"&gt;
        &lt;i class="fas fa-arrow-right" id="rightArrow"&gt;&lt;/i&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>For context, I am trying to recreate the flashcard feature from quizlet.com for practice. </p>