如何避免createElement重复生成图片 点击按钮时先清空旧元素再渲染新内容

核心逻辑很简单：每次点击按钮触发计算前，先清空所有已生成的海报元素，再根据本次的判断结果生成新海报即可。

具体修改步骤 #

• 新增清空海报的工具函数，一次性清空所有海报容器内的内容
• 每次触发点击事件时，先重置所有海报显示状态变量，再执行本次的条件判断
• 执行生成海报逻辑前，先调用清空函数删掉旧内容

修改后的完整代码 #

JavaScript代码 #

const movieTime = 30;
const button = document.getElementById("calculate");
// 声明海报显示变量，避免全局污染，有其他海报的显示变量可在此处一同声明
let displayMoviePoster1 = false;

button.onclick = function calculateTime() {
  // 第一步：清空已有海报
  clearPosters();
  // 第二步：重置所有海报显示状态为false，避免上一次的结果影响本次判断
  displayMoviePoster1 = false;
  // 此处可替换为你实际从表单获取用户输入的逻辑
  let userTimeAvailable = 25;

  if (userTimeAvailable < movieTime) {
    console.log(
      "You have enough time to watch " +
      Math.round((userTimeAvailable / movieTime) * 100) +
      "% of the movie."
    );
    displayMoviePoster1 = true;
  }
  // 其他海报对应的if判断逻辑可自行补充
  moviePosterGenerator();
}

// 新增清空海报函数
function clearPosters() {
  // 选中所有海报容器
  const posterContainers = document.querySelectorAll('.movie-poster');
  // 遍历清空每个容器的内容
  posterContainers.forEach(container => {
    container.innerHTML = '';
  })
}

function moviePosterGenerator() {
  if (displayMoviePoster1 === true) {
    var par = document.getElementById("poster__2");
    var theatricalMoviePoster = document.createElement("img");
    theatricalMoviePoster.src = "imgURL";
    par.appendChild(theatricalMoviePoster);
  }
  // 其他海报的生成逻辑可自行补充
}

HTML代码（无需修改，和原有逻辑一致） #

<button class="button" id="calculate">calculate</button>

<div class="movie-poster__container" id="posters">
  <div class="movie-poster" id="poster__1"></div>
  <div class="movie-poster" id="poster__2"></div>
  <div class="movie-poster" id="poster__3"></div>
  <div class="movie-poster" id="poster__4"></div>
</div>

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