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

Question

I am trying to make a script that will take the images from one div element and put it to div rndmImage randomly on button click, I should see images when document is loaded, but the new div where images should go after click must be empty until click heapends.我正在尝试制作一个脚本，该脚本将从一个 div 元素中获取图像并在单击按钮时将其随机放入 div rndmImage，我应该在加载文档时看到图像，但是单击后图像应该去的新 div 必须为空，直到点击堆积。 And I need only JavaScript, no jQuery, alse i can not change the html, and it has to work for any number of images.而且我只需要 JavaScript，不需要 jQuery，而且我无法更改 html，而且它必须适用于任意数量的图像。 So if you have some ideas that would be great.所以如果你有一些想法会很棒。 Here's my code.这是我的代码。

 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>

Answer 1

welcome to StackOverflow!欢迎来到 StackOverflow！

I would first hide the .wrapper > div img as that will prevent the images to show, then, append a data-pos to help select the position and simply randomize them and pick the src to show on the placeholder我会首先隐藏.wrapper > div img因为这将阻止图像显示，然后附加一个data-pos以帮助选择位置并简单地随机化它们并选择src以显示在占位符上

and remember that you have a <div> as placeholder, so you can't assign src , only if you change it to <img>请记住，您有一个<div>作为占位符，因此您不能分配src ，只有将其更改为<img>

so, something like this 😊所以，像这样😊

 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>

Answer 2

This is a working snippet of your code:这是您的代码的工作片段：

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';
    }
}

Answer 3

<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);
}

Answer 4

You can do this with plain javascript like this:你可以像这样使用普通的 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>

If you're able to use randojs , you can even simplify the randomness and make it all cryptographically secure like this:如果您能够使用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>

Answer 5

Try this: this is my image in HTML file试试这个：这是我在 HTML 文件中的图像

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

my javascript file我的 javascript 文件

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

everytime you click button you get a new image每次单击按钮时都会获得新图像

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

问题描述

5 个解决方案

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

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

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

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

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

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

问题描述

5 个解决方案

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

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

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

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

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

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

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

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

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

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