javascript - 防止 createElement 创建多个相同的图像

Question

我将尝试尽可能彻底地做到这一点，所以坚持我。

我的程序接受在表单上输入的用户输入。此输入通过一系列将变量设置为 true 的 if 语句，这些设置为 true 的变量将使用 createElement 在预定的 div 中创建 img。将始终创建至少一个 img，最多创建 4 个 img。这一切都是通过单击按钮完成的。

我了解到 createElement 将在每个按钮单击时不断地 createElement 将 img 发布到原始 img 旁边，并将无限执行此操作或直到重新加载页面。

我的解决方案是创建一个计数器，每次单击按钮时都会递增。这处理了任何额外的 createElements。然后我想如果用户首先输入了一个大数字，它将创建 2 个单独的图像，比如图像 1 和图像 2（这是所需的），那么如果用户输入一个仅创建图像 1 的较小数字，那么图像2 仍会发布（不需要）。当然，页面刷新会清除创建的图像并避免这种情况。

所以我不太确定该怎么做......理想情况下，当第二次按下按钮时，所有旧的 createElements 都将被清除，所有新的 createElements 都会填充。

为了这个问题，我删除了柜台

poster__#'s 是被调用的 id's...

const movieTime = 30;
var userTimeAvailable = 25;
const button = document.getElementById("calculate");

button.onclick = function calculateTime() {
  if (userTimeAvailable < movieTime) {
    console.log(
      "You have enough time to watch " +
      Math.round((userTimeAvailable / movieTime) * 100) +
      "% of the movie."
    );
    displayMoviePoster1 = true;
  }
  moviePosterGenerator();
}

function moviePosterGenerator() {
  if (displayMoviePoster1 === true) {
    var par = document.getElementById("poster__2");
    var theatricalMoviePoster = document.createElement("img");
    theatricalMoviePoster.src = "imgURL";
    par.appendChild(theatricalMoviePoster);
  }
}

<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>

标签： javascripthtmlcss