Question

好的，进一步解释 - 我正在制作一个脚本，当你点击按钮时图像会改变（第一个就好了）。但是，当图像改变时 - 我还需要它来改变另一个图像并存储和显示最后三个随机图像。这是一场比赛。

我尝试的一切都行不通。我刚刚打印出第一张图片src，而不是单击按钮后的那张图片...它应该更新最后一张图片。

这是我的代码：

var cards = new Array();
cards.push("images/img1.jpg");
cards.push("images/img2.jpg");
cards.push("images/img3.jpg");
cards.push("images/img4.jpg");
cards.push("images/img5.jpg");
cards.push("images/img6.png");
cards.push("images/img7.jpg");


function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function pickimg2() {
  document.randimg.src = cards[getRandomInt(0, cards.length - 1)];
}

var previouscards;
var previouscards = document.getElementById('cards').src;
var prec = document.write(previouscards);
document.write("<img style='width:200px;height:200px;' src=" + prec + " />"); //I Want this to change to the current image!..

<div>
  <input type="button" href="#" onClick="pickimg2();return false;" value="Click Me" />
  <img id="cards" style="width:200px;height:200px;" src="+document.randimg.src+" name="randimg">
</div>

Answer 1

把它放在pick me函数中，因为它首先返回undefined，因为js尚未写入

＆＃13;

 <script>
    var cards = new Array();
    cards.push("images/img1.jpg");
    cards.push("images/img2.jpg");
    cards.push("images/img3.jpg");
    cards.push("images/img4.jpg");
    cards.push("images/img5.jpg");
    cards.push("images/img6.png");
    cards.push("images/img7.jpg");


    function getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    function pickimg2() {
      document.randimg.src = cards[getRandomInt(0, cards.length - 1)];
      
       var previouscards;
    var previouscards = document.getElementById('cards').src;
    var prec = document.write (previouscards);
    document.write("<img style='width:200px;height:200px;' src="+prec+" />"); //I Want this to change to the current image!..
    }
    </script>
    <div>
      <input type="button" href="#" onClick="pickimg2();return false;" value="Click Me"/>
        <img id="cards" style="width:200px;height:200px;" src="+document.randimg.src+" name="randimg">
    </div>

＆＃13;

Answer 2

这样的东西？

<script>
    var cards = new Array();
    cards.push("https://picsum.photos/100?image=1");
    cards.push("https://picsum.photos/100?image=2");
    cards.push("https://picsum.photos/100?image=3");
    cards.push("https://picsum.photos/100?image=4");

    var lastPics = new Array();
    var currentPic = cards[0];


    function getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    function pickimg2() {
    	var image = cards[getRandomInt(0, cards.length - 1)];
      var innerHtml = ""
      document.randimg.src = image;
      document.getElementById("copy").src = image;
      
      lastPics.splice(0,0,image);
      if (lastPics.length > 3) {
        lastPics.pop();
      }
      lastPics.forEach(function(item){
        innerHtml = innerHtml + "<img name='copy' style='width:50px;height:50px;' src="+item+" />"
      });
      document.getElementById("lastPicsDiv").innerHTML = innerHtml;
     
    }
    </script>
    <div id="lastPicsDiv">[]</div>
    <div>
      <input type="button" href="#" onClick="pickimg2();return false;" value="Click Me"/>
      <br>
      <img id="cards" style="width:100px;height:100px;" src="https://picsum.photos/100?image=1" name="randimg">
    </div>

    <script>
    document.write("<img id='copy' style='width:100px;height:100px;' src="+currentPic+" />");
    //document.write("<p id='lastpics'>"+lastPics+"</p>"); //I Want this to change to the current image!..
    </script>

需要随机图像网址来更改和存储最后三个图像

2 个答案: