我使用 DOM 操作来让图像在单击 div 和按钮时显示。唯一的问题是我不知道如何调整图像大小。当我删除“style = display:”none”;”时 线条尺寸可以正常工作，但图像不会隐藏，直到您清除它并再次单击 div & 按钮。我不知道如何解决这个问题

var data = [];

function showEnd1() {
  for (var i = 0; i < data.length; i++) {

    var showImage = document.createElement("img");
    showImage.id = "new" + data[i];
    showImage.classList = ".ending1";
    showImage.innerHTML = data[i];
    showImage.src = src="media/end1.png";

    var results = document.querySelector("#results");
        results.appendChild(showImage); 
  }

 data = [];

}

function showEnd2() {
    for (var i = 0; i < data.length; i++) {

      var showImage = document.createElement("img");
      showImage.id = "new" + data[i];
      showImage.classList = ".ending2";
      showImage.innerHTML = data[i];
      showImage.src = src="media/end2.png";

      var results = document.querySelector("#results");
          results.appendChild(showImage); 

    }

   data = [];

  }

  function showEnd3() {
    for (var i = 0; i < data.length; i++) {

      var showImage = document.createElement("img");
      showImage.id = "new" + data[i];
      showImage.classList = ".ending3";
      showImage.innerHTML = data[i];
      showImage.src = src="media/end3.png";

      var results = document.querySelector("#results");
          results.appendChild(showImage); 

    }

   data = [];

  }

  function showEnd4() {
    for (var i = 0; i < data.length; i++) {

      var showImage = document.createElement("img");
      showImage.id = "new" + data[i];
      showImage.classList = ".ending4";
      showImage.innerHTML = data[i];
      showImage.src = src="media/end4.png";

      var results = document.querySelector("#results");
          results.appendChild(showImage);

    }

   data = [];

  }

  function showEnd5() {
    for (var i = 0; i < data.length; i++) {

      var showImage = document.createElement("img");
      showImage.id = "new" + data[i];
      showImage.classList = ".ending5";
      showImage.innerHTML = data[i];
      showImage.src = src="media/end5.png";

      var results = document.querySelector("#results");
          results.appendChild(showImage); 

    }

   data = [];

  }

  function showEnd6() {
    for (var i = 0; i < data.length; i++) {

      var lastLetter = data[i].charAt(data[i].length - 1);

      var showImage = document.createElement("img");
      showImage.id = "new" + data[i];
      showImage.classList = ".ending" + lastLetter;
      showImage.innerHTML = data[i];
      showImage.src = src="media/end" + lastLetter + ".png";

      var results = document.querySelector("#results");
          results.appendChild(showImage); 

    }

   data = [];

  }

function clearResult () {
 /* data = []; */

  var results = document.getElementById("results");
    results.innerHTML = "";

}

function addToArray() {
    data.push(this.innerHTML);

}

window.onload = function end6() {
  var btnShow = document.getElementById("show");
  btnShow.addEventListener("click", showEnd6);


  var btnClear = document.getElementById("clear");
  btnClear.addEventListener("click", clearResult)

  var btnEnd = document.querySelectorAll("[class^=ending]");

  for (var i = 0; i < btnEnd.length; i++) {
      btnEnd[i].addEventListener("click", addToArray);
  }
}
<h3>Pick an end image</h3>
<div class="box" id="img">
    <div id="end1" class="ending1">Sub End - end 1</div>
    <div id="end2" class="ending2">Knife End - end 2</div>
    <div id="end3" class="ending3">Safe End - end 3</div>
    <br><br>
    <div id="end4" class="ending4">Axe End - end 4</div>
    <div id="end5" class="ending5">Coffin End - end 5</div>
    <div id="end6" class="ending6">True End - end 6</div>

    <br><br>
    <button id="show">Show</button>
    <button id="clear">Clear</button>
</div>

<h3>Result</h3>
<div class="box" id="results">

<img class="endone" id="picture1" src="https://placehold.co/300x200" style = "display: none;">

<img class="endtwo" id="picture2" src="https://placehold.co/300x200" style = "display: none;">

<img class="endthree" id="picture1" src="https://placehold.co/300x200" style = "display: none;">

<img class="endfour" id="picture2" src="https://placehold.co/300x200" style = "display: none;">

<img class="endfive" id="picture1" src="https://placehold.co/300x200" style = "display: none;">

<img class="endsix" id="picture2" src="https://placehold.co/300x200" style = "display: none;">
</div>