JavaScript无法替换图片问题求助：答题游戏切换图片失效

问题描述 #

实现了一个答题游戏，每个题目占满一屏，点击“Next”按钮时需要替换全部内容，但目前新图片只会追加到第一张图片下方，无法完全替换。

原因分析 #

每次调用iterate函数时，通过appendChild将新图片添加到#image容器中，没有先清空容器内的旧图片元素，导致图片不断累加。此外，每次调用iterate都会重新给选项按钮绑定点击事件，会造成事件重复绑定，可能引发多次触发的问题。

解决方案 #

1. 清空图片容器再添加新图片：在创建新图片前，先清空#image容器的内容；
2. 避免事件重复绑定：将选项按钮的点击事件和评估按钮的事件绑定移到初始化阶段，不要每次调用iterate都重新绑定。

修改后的完整代码 #

JavaScript

// Questions will be asked
const Questions = [
 { id: 0, i: "images/trump.jpg", a: [{ text: "George Washington", isCorrect: false },  { text: "John Adams", isCorrect: false }, { text: "James Madison", isCorrect: false },  { text: "Donald John Trump", isCorrect: true } ] }, 
 { id: 1, i: "http://www.google.com/intl/en_com/images/logo_plain.png", a: [{ text: "Lampang", isCorrect: false, isSelected: false }, { text: "phuket", isCorrect: false }, { text: "Ayutthaya", isCorrect: false }, { text: "Bangkok", isCorrect: true } ] }, 
 { id: 2, i: "http://www.google.com/intl/en_com/images/logo_plain.png", a: [{ text: "surat", isCorrect: false }, { text: "vadodara", isCorrect: false }, { text: "gandhinagar", isCorrect: true }, { text: "rajkot", isCorrect: false } ] } 
]

// Set start
var start = true;
let selected = "";
const result = document.getElementsByClassName("result")[0];
const op1 = document.getElementById('op1');
const op2 = document.getElementById('op2');
const op3 = document.getElementById('op3');
const op4 = document.getElementById('op4');
const evaluateBtn = document.getElementsByClassName("evaluate")[0];

// 绑定选项点击事件（只绑定一次）
op1.addEventListener("click", () => {
  op1.style.backgroundColor = "lightgoldenrodyellow";
  op2.style.backgroundColor = "lightskyblue";
  op3.style.backgroundColor = "lightskyblue";
  op4.style.backgroundColor = "lightskyblue";
  selected = op1.value;
})

op2.addEventListener("click", () => {
  op1.style.backgroundColor = "lightskyblue";
  op2.style.backgroundColor = "lightgoldenrodyellow";
  op3.style.backgroundColor = "lightskyblue";
  op4.style.backgroundColor = "lightskyblue";
  selected = op2.value;
})

op3.addEventListener("click", () => {
  op1.style.backgroundColor = "lightskyblue";
  op2.style.backgroundColor = "lightskyblue";
  op3.style.backgroundColor = "lightgoldenrodyellow";
  op4.style.backgroundColor = "lightskyblue";
  selected = op3.value;
})

op4.addEventListener("click", () => {
  op1.style.backgroundColor = "lightskyblue";
  op2.style.backgroundColor = "lightskyblue";
  op3.style.backgroundColor = "lightskyblue";
  op4.style.backgroundColor = "lightgoldenrodyellow";
  selected = op4.value;
})

// 绑定评估按钮事件（只绑定一次）
evaluateBtn.addEventListener("click", () => {
  if (selected == "true") {
    result.innerHTML = "True";
    result.style.color = "green";
  } else {
    result.innerHTML = "False";
    result.style.color = "red";
  }
})

// Iterate function
function iterate(id) {
  // 清空结果显示
  result.innerText = "";

  // 清空图片容器后添加新图片
  const src = document.getElementById("image");
  src.innerHTML = ''; // 清空容器
  var img = document.createElement("img");
  img.src = Questions[id].i;
  src.appendChild(img);

  // 更新选项文本和值
  op1.innerText = Questions[id].a[0].text;
  op2.innerText = Questions[id].a[1].text;
  op3.innerText = Questions[id].a[2].text;
  op4.innerText = Questions[id].a[3].text;

  op1.value = Questions[id].a[0].isCorrect;
  op2.value = Questions[id].a[1].isCorrect;
  op3.value = Questions[id].a[2].isCorrect;
  op4.value = Questions[id].a[3].isCorrect;

  // 重置选项背景色
  op1.style.backgroundColor = "lightskyblue";
  op2.style.backgroundColor = "lightskyblue";
  op3.style.backgroundColor = "lightskyblue";
  op4.style.backgroundColor = "lightskyblue";
  selected = "";
}

if (start) {
  iterate("0");
}

// Next button handler
const next = document.getElementsByClassName('next')[0];
var id = 0;

next.addEventListener("click", () => {
  setTimeout(() => {
    start = false;
    if (id < 2) {
      id++;
      iterate(id);
    }
  })
})

CSS

:root {
  --primary: #1D1D1F;
  --secondary: #858786;
  --erro: #FF5757;
  text-align: center;
  align-items: center;
  align-self: center;
  font-family: SF Pro Display, SF Pro Icons, AOS Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}

.column {
  justify-items: center;
  justify-content: center;
  float: left;
  width: 50%;
  justify-content: center;
}

.main-container {
  margin: 50px;
  border-radius: 20px;
  background-color: #F5F8FA;
}

/* Clear floats after the columns */
.main-container:after {
  content: "";
  display: table;
  clear: both;
}

.main-container img {
  width: 320px;
  height: 320px;
  border-radius: 20px;
  object-position: center;
  object-fit: cover;
}

.center-cropped img {
  border-radius: 2px;
  width: 50%;
  height: 50%;
  object-position: center;
  object-fit: cover;
}

.option-container {
  margin-top: 50%;
  margin-bottom: 50%;
  grid-column: 1;
  margin: 10px;
  padding: 5px;
  width: 100%;
  height: auto;
}

.quiz-image {
  margin: 10px;
  padding: 10px;
  width: 100%;
}

.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

.option {
  border-radius: 10px;
  border-width: 0px;
  margin: 10px;
  padding: 10px;
  width: 50%;
  height: auto;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  background-color: #1da1f2;
}

.option:hover {
  background-color: #e1e8ed;
}

.title h1 {
  font-size: 4rem;
  font-weight: 400;
  padding: 10px;
  color: #1d1d1d;
}

.title h2 {
  font-size: 1.5rem;
  font-weight: 400;
  color: #1D1D1D;
}

h2 {
  font-size: 3rem;
  font-weight: 300;
  color: #1D1D1D;
}

.question-container {
  margin: 10px;
  padding: 5px;
  width: 80vw;
  height: 10vh;
  background-color: #c7dddf;
  font-size: x-large;
  text-align: center;
}

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title">
  <h1>Guess The President</h1>
</div>
<div class="main-container">
  <div class="result"></div>
  <div class="column">
    <div class="quiz-image" id="image"></div>
  </div>
  <div class="column">
    <div class="option-container">
      <button class="option" id="op1">option1</button>
      <button class="option" id="op2">option2</button>
      <button class="option" id="op3">option3</button>
      <button class="option" id="op4">option4</button>
    </div>
  </div>
</div>
<div class="navigation">
  <button class="evaluate">Evaluate</button>
  <button class="next">Next</button>
</div>

关键修改点 #

• 在iterate函数中，添加src.innerHTML = ''清空图片容器，再插入新图片，解决图片追加问题；
• 将选项按钮和评估按钮的事件移到函数外部，只绑定一次，避免重复绑定导致的多次触发问题；
• 在iterate中添加选项背景色重置和selected变量清空，确保切换题目后状态重置。

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