堆栈内存溢出
  繁体   English   中英

单击按钮时来自 html 的随机图像

[英]Random image from html on button click

 原文  2020-09-05 18:06:46  7   5    javascript/ html/ arrays/ random/ mathjs

问题描述

我正在尝试制作一个脚本，该脚本将从一个 div 元素中获取图像并在单击按钮时将其随机放入 div rndmImage，我应该在加载文档时看到图像，但是单击后图像应该去的新 div 必须为空，直到点击堆积。 而且我只需要 JavaScript，不需要 jQuery，而且我无法更改 html，而且它必须适用于任意数量的图像。 所以如果你有一些想法会很棒。 这是我的代码。 

 window.addEventListener('load', start, false); function start() { var butt = document.getElementsByTagName('button')[0]; var rnImg = document.getElementsByClassName('ekran'); var pictures = document.getElementsByTagName('img'); var choose = Math.floor(Math.random()*pictures.length); butt.addEventListener('click', menjaj, false); function menjaj(e) { var new = e.button; var img = []; for(var i = 0; i< pictures.length; i++) { var dodaj = img[i]; img.push(dodaj); } //ekran.src = 'slike/' + slike[izbor] + '.jpg'; } }
 <body> <div class="wrapper"> <div> <img src="slike/leto1.jpg" alt="leto1"> <img src="slike/leto2.jpg" alt="leto2"> <img src="slike/leto3.jpg" alt="leto3"> <img src="slike/leto4.jpg" alt="leto4"> <img src="slike/leto5.jpg" alt="leto5"> <img src="slike/leto6.jpg" alt="leto6"> <img src="slike/leto7.jpg" alt="leto7"> <img src="slike/leto8.jpg" alt="leto8"> <img src="slike/leto9.jpg" alt="leto9"> </div> <div> <button type="button">choose</button> </div> <div class="rndmImage"></div> </div> </body>

5 个解决方案

解决方案1
 0  2020-09-05 18:54:33

欢迎来到 StackOverflow！

我会首先隐藏.wrapper > div img因为这将阻止图像显示，然后附加一个data-pos以帮助选择位置并简单地随机化它们并选择src以显示在占位符上

请记住，您有一个<div>作为占位符，因此您不能分配src ，只有将其更改为<img>

所以，像这样😊 

 function chooseImg() { // get total images available var totalImages = document.querySelectorAll('.wrapper > div img').length log('totalImages', totalImages) // get a random position var rndPosition = Math.floor(Math.random() * totalImages) log('rndPosition', rndPosition) // get hold of the image for such position var rndImage = document.querySelector('.wrapper > div img[data-pos="' + rndPosition + '"]') log('rndImage', rndImage) // assign the source to the DIV document.querySelector('.rndmImage').style = 'background-image: url("' + rndImage.src + '")' } function log(txt, obj) { console.log(txt, obj) }
 .wrapper > div img { display: none; } .rndmImage { background-size: contain; background-repeat: no-repeat; width: 100px; height: 100px; }
 <div class="wrapper"> <div> <img data-pos="0" src="https://randomwordgenerator.com/img/picture-generator/54e5d2434953a514f1dc8460962e33791c3ad6e04e507440742f7cd09645cc_640.jpg" alt="leto1"> <img data-pos="1" src="https://randomwordgenerator.com/img/picture-generator/54e2d1404a57a814f1dc8460962e33791c3ad6e04e5074417c2d78d19f44c4_640.jpg" alt="leto2"> <img data-pos="2" src="https://randomwordgenerator.com/img/picture-generator/57e2d5444851a414f1dc8460962e33791c3ad6e04e50744172287ad2914fc4_640.jpg" alt="leto3"> <img data-pos="3" src="https://randomwordgenerator.com/img/picture-generator/51e8d0444f56b10ff3d8992cc12c30771037dbf85254794e722c73d19245_640.jpg" alt="leto4"> <img data-pos="4" src="https://randomwordgenerator.com/img/picture-generator/53e4d2464a56a914f1dc8460962e33791c3ad6e04e507440722d7cd39345c1_640.jpg" alt="leto5"> <img data-pos="5" src="https://randomwordgenerator.com/img/picture-generator/57e9dc434b5ba414f1dc8460962e33791c3ad6e04e50744172297bd5934cc4_640.jpg" alt="leto6"> <img data-pos="6" src="https://randomwordgenerator.com/img/picture-generator/55e1dc4b4254ad14f1dc8460962e33791c3ad6e04e507440722d72d09249c7_640.jpg" alt="leto7"> <img data-pos="7" src="https://randomwordgenerator.com/img/picture-generator/57e9d4474e54a814f1dc8460962e33791c3ad6e04e50744172297cdd974cc0_640.jpg" alt="leto8"> <img data-pos="8" src="https://randomwordgenerator.com/img/picture-generator/53e6dc404951b10ff3d8992cc12c30771037dbf852547848702e7ed19348_640.jpg" alt="leto9"> </div> <div> <button type="button" onclick="chooseImg()">choose</button> </div> <div class="rndmImage"></div> </div>

解决方案2
 0 已采纳  2020-09-05 19:05:00

这是您的代码的工作片段：

window.addEventListener('load', start, false);

function start () {
    var butt = document.getElementsByTagName('button')[0];
    var rnImg = document.getElementsByClassName('rndmImage')[0]; //Change selector to existing class and select the first (the only) one
    var pictures = document.getElementsByTagName('img');

    butt.addEventListener('click', menjaj, false);

    function menjaj (e) {
        // var new = e.button;// 'new' is reserved word in JS, you can't use it as variable name
        // var btn = e.button;// but this line is useless
        var choose = Math.floor(Math.random() * pictures.length); //better move this line inside this function to get rundom image every button clicks

        var img = document.createElement('img'); //creates new img tag
        img.src = pictures[choose].src;
        rnImg.innerHTML = ''; //to delete previous image
        rnImg.appendChild(img);
        // var img = []; //useless lines of code

        // for(var i = 0; i< pictures.length; i++) {
        //     var dodaj = img[i];
        //     img.push(dodaj);
        // }

        //ekran.src = 'slike/' + slike[izbor] + '.jpg';
    }
}

解决方案3
 0  2020-09-05 19:17:34

<div class="wrapper">
  <img src="../Assets1/Image/1.svg" alt="" />
  <img src="../Assets1/Image/2.svg" alt="" />
  <img src="../Assets1/Image/3.svg" alt="" />
</div>
<button>Click</button>
<div class="randomImageContainer"></div>


const button = document.querySelector('button');
button.addEventListener('click', randomImage);
function randomImage() {
  const image = document.querySelectorAll('.wrapper > img');
  const randomImageContainer = document.querySelector('.randomImageContainer');
  let randomNumber = Math.floor(Math.random() * image.length);

  const img = document.createElement('img');
  img.src = image[randomNumber].src;
  randomImageContainer.appendChild(img);
}

解决方案4
 0  2020-09-06 03:09:13

你可以像这样使用普通的 javascript 来做到这一点： 

 document.querySelector("button").addEventListener("click", () => { var imgElements = document.querySelectorAll(".wrapper img"); document.querySelector(".rndmImage").innerHTML = imgElements[Math.floor(Math.random() * imgElements.length)].outerHTML; });
 <div class="wrapper"> <div> <img src="slike/leto1.jpg" alt="leto1"> <img src="slike/leto2.jpg" alt="leto2"> <img src="slike/leto3.jpg" alt="leto3"> <img src="slike/leto4.jpg" alt="leto4"> <img src="slike/leto5.jpg" alt="leto5"> <img src="slike/leto6.jpg" alt="leto6"> <img src="slike/leto7.jpg" alt="leto7"> <img src="slike/leto8.jpg" alt="leto8"> <img src="slike/leto9.jpg" alt="leto9"> </div> <div> <button type="button">choose</button> </div> <div class="rndmImage"></div> </div>

如果您能够使用randojs ，您甚至可以简化随机性并使其全部加密安全，如下所示： 

 document.querySelector("button").addEventListener("click", () => document.querySelector(".rndmImage").innerHTML = rando(document.querySelectorAll(".wrapper img")).value.outerHTML);
 <script src="https://randojs.com/2.0.0.js"></script> <div class="wrapper"> <div> <img src="slike/leto1.jpg" alt="leto1"> <img src="slike/leto2.jpg" alt="leto2"> <img src="slike/leto3.jpg" alt="leto3"> <img src="slike/leto4.jpg" alt="leto4"> <img src="slike/leto5.jpg" alt="leto5"> <img src="slike/leto6.jpg" alt="leto6"> <img src="slike/leto7.jpg" alt="leto7"> <img src="slike/leto8.jpg" alt="leto8"> <img src="slike/leto9.jpg" alt="leto9"> </div> <div> <button type="button">choose</button> </div> <div class="rndmImage"></div> </div>

解决方案5
 0  2021-12-31 09:13:47

试试这个：这是我在 HTML 文件中的图像

<snap id="image" class="btn btn-warning" onclick="changeImage()">Image</snap>
<image id="imagechange" src="https://picsum.photos/200/300" ></image>

我的 javascript 文件

imgcount = 0;
function changeImage() {
  document.getElementById("imagechange").src =
    "https://picsum.photos/200/" + (300 + imgcount);
  imgcount++;
}

每次单击按钮时都会获得新图像

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 来自按钮单击的随机背景图像 点击按钮的随机图像 单击按钮上的Javascript随机图像 使用 Javascript 单击按钮获取随机图像 Javascript带有单击按钮上的文本的随机图像 在 HTML 按钮上插入图像 如何从按钮单击下载HTML画布图形作为图像 单击初始按钮时将HTML转换为png图像 单击按钮上的html2canvas下载生成的下载图像 尝试在按钮单击时播放随机图像和随机声音
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM