如何在不重新启动页面的情况下使用按钮显示不同的随机图像？答案

【问题标题】：How show different random Image with button without restarting the page?如何在不重新启动页面的情况下使用按钮显示不同的随机图像？
【发布时间】：2021-12-31 02:38:18
【问题描述】：

我希望我的弹出窗口（单击按钮时）在每次单击按钮时显示我的文件夹中的随机图像。我的网站使用了 html、css 和 javascript。

问题：每次都是同一张随机图片。只有当我重新启动页面时才会显示不同的随机图像。

现在有效：当我点击开始按钮时，会弹出一个带有来自该文件夹的随机图像的弹出窗口（这正是我想要的）但是如果我点击我的关闭按钮随机图片并再次按下开始按钮，相同的图片再次弹出。只有当我重新启动页面时，当我按下开始按钮时才会显示新的随机图片。但是当我关闭弹出窗口并想要重新启动它时，该图片保持不变。

我每次按下开始按钮时都想要一个随机图像，而无需重新启动页面。

我是否在 javascript 中使用布尔值？我可以自行重新启动该功能吗？我一直看到类似的问题，但没有一个解决方案对我有用。

（开始按钮也是一个图片，但它是一个按钮）对不起，如果代码格式奇怪，我是代码新手

谢谢！！

我的代码：

HTML：

<div class="popup" id="popup-1">
    <div class="overlay"> </div>
    <div class="content">
        <img class="imagelook"/> <!-- image is start-button -->
        <div 
        class="close-btn"
        onclick="togglePopup()"  
        onclick="generateRandomPicture(array)">&times; <!-- random image from folder -->
        </div>
    </div>
</div>

<body>
<button type="button" onclick="togglePopup()" class="imglook"></button> <!-- the start-button -->
</body>

Javascript：

 function togglePopup(){
    document.getElementById("popup-1").classList.toggle("active");  
}

const imageArray =[
    "zettel/9.png",
    "zettel/8.png",
    "zettel/10.png",
    "zettel/11.png",
    "zettel/12.png",
    "zettel/13.png"
];

const image = document.querySelector("img");
    
window.onload = () => generateRandomPicture(imageArray);

function generateRandomPicture(array){
    let randomNum = Math.floor(Math.random() * imageArray.length); 
    image.setAttribute("src", imageArray[randomNum]);
    }

【问题讨论】：

div 元素必须在 body 内 - 除非上面只是简单地提取，否则该标记无效
另外 - 您可以分配多个事件处理程序，但不能在 HTML 中使用多个 onclick 定义
当我将 div 放入正文时，程序无法正常工作，但谢谢，我会以某种方式尝试！

标签： javascript html image random directory

【解决方案1】：

也许以下可能帮助 - 编码为允许多个 popup 元素与多个 button 元素一起触发在各自的 popup div 中显示不同图像

const images = [
  "zettel/9.png",
  "zettel/8.png",
  "zettel/10.png",
  "zettel/11.png",
  "zettel/12.png",
  "zettel/13.png"
];

const _CN='active';


const bttnclickhandler=function(e){
  // generate random image based upon array
  let imgsrc=images[mt_rand(0,images.length-1)];
  // assign image the new src
  this.previousElementSibling.querySelector('img').src=imgsrc;
  this.previousElementSibling.classList.add(_CN);
  console.info(imgsrc)
};

const closeclickhandler=function(e){
  e.target.closest('.popup').classList.remove(_CN);
  this.previousElementSibling.src='';
  console.clear();
};

// generate a random number between a & b
const mt_rand=(a,b)=>Math.floor( Math.random() * ( b - a + 1 ) + a );


// assign listeners to all pertinent elements
document.querySelectorAll('button.imglook').forEach(n=>n.addEventListener('click',bttnclickhandler));
document.querySelectorAll('div.close-btn').forEach(n=>n.addEventListener('click',closeclickhandler));

document.querySelectorAll('div.popup').forEach(n=>{
  n.querySelector('img').src=images[mt_rand(0,images.length-1)]
})

.active{background:pink}
.popup{margin:1rem;}
.imglook{padding:1rem}

<div class="popup">
  <div class="overlay"></div>
  <div class="content">
    <img class="imagelook" />
    <div class="close-btn">&times;</div>
  </div>
</div>
<button type="button" class="imglook"></button>



<div class="popup">
  <div class="overlay"></div>
  <div class="content">
    <img class="imagelook" />
    <div class="close-btn">&times;</div>
  </div>
</div>
<button type="button" class="imglook"></button>

【讨论】：