Uncaught TypeError: answer.appendChild不是函数问题求助（附代码）

嘿，我马上就发现问题所在了——你代码里的anwser（顺便提下，拼写应该是answer哦，建议统一修正避免混淆）是通过document.querySelectorAll('.anwser1')获取到的NodeList（节点列表），它是多个DOM元素的集合，而appendChild、firstChild、removeChild这些方法都是单个DOM元素独有的，直接在节点列表上调用这些方法肯定会抛出TypeError。

咱们一步步拆解问题并修复：

1. 错误的核心来源 #

看你的resetState函数：

function resetState(){
  next.classList.add('hide')
  while(anwser.firstChild){
    anwser.removeChild(anwser.firstChild)
  }
}

这里你试图在anwser（节点列表）上调用firstChild和removeChild，但NodeList根本没有这些属性和方法。而且你真正想操作的应该是存放答案按钮的容器（比如questionCon），而不是按钮本身的集合。

你提到的answer.appendChild(button)错误也是同样的道理——你把节点列表当成了单个DOM元素来使用。

2. 具体修复方案 #

方案一：修正resetState函数，正确清空旧答案

如果你想保留页面上的.controls容器（Start和Next按钮），只移除答案按钮，可以改成这样：

function resetState(){
  next.classList.add('hide');
  // 找到所有.anwser1按钮并逐个移除
  const answerButtons = questionCon.querySelectorAll('.anwser1');
  answerButtons.forEach(button => button.remove());
}

方案二：优化结构，用专门的容器存放答案

为了让代码更清晰，建议在HTML里给答案按钮加一个专属容器：

<div class="conteiner"> 
  <h3 class="kitxva hide">Question</h3> 
  <div class="questionCon " id="questionCon" > 
    <!-- 新增答案容器 -->
    <div id="answersContainer"></div>
    <div class="controls"> 
      <button id="start" class="anwser">Start</button> 
      <button id="next" class="anwser1">Next</button> 
    </div> 
  </div> 
</div>

然后在showQuestion函数里，把新创建的按钮添加到这个专属容器中：

function showQuestion(question){
  const answersContainer = document.getElementById('answersContainer');
  // 先清空旧内容
  answersContainer.innerHTML = '';
  
  // 动态创建答案按钮并添加到容器
  question.answers.forEach(answerText => {
    const button = document.createElement('button');
    button.className = 'anwser1';
    button.textContent = answerText;
    // 这里调用appendChild就没问题了，因为answersContainer是单个DOM元素
    answersContainer.appendChild(button);
  });
}

对应的resetState可以简化成：

function resetState(){
  next.classList.add('hide');
  document.getElementById('answersContainer').innerHTML = '';
}

方案三：修正初始化的按钮显示逻辑

你的startGame里循环显示按钮的逻辑是对的，但注意拼写统一：

function startGame(){
  for (var i=0;i<anwser.length;i+=1){
    anwser[i].style.display = 'block';
  }
  kixtva.classList.remove('hide');
  start.classList.add('hide')
  shuffleQuestions = questions.sort(() => Math.random() - .5)
  currentQuestionIndex = 0;
  setNextQuestion()
}

不过如果用了上面的动态创建按钮方案，这部分可以直接去掉，让showQuestion来生成按钮即可。

总结 #

核心问题就是把NodeList（多元素集合）当成了单个DOM元素来操作，只要把操作目标切换到单个DOM容器元素，这个TypeError就能完美解决啦。

内容的提问来源于stack exchange，提问作者Eleniko