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中的{1}}。

您必须通过将索引传递给节点列表来标识列表中所需的节点，然后才能使用节点的属性/方法。

当我从querySelector更改为querySelectorAll时，为什么会变得未定义？

1 个答案: