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

Question

我正在尝试制作一个脚本，该脚本将从一个 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>

Answer 1

欢迎使用 Whosebug！

我会先隐藏 .wrapper > div img 因为这会阻止图像显示，然后附加一个 data-pos 来帮助 select 位置并简单地随机化它们并选择 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>

Answer 2

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

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

您可以像这样使用普通 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>

Answer 5

试试这个： 这是我在 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++;
}

每次点击按钮都会得到一张新图片

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

Random image from html on button click

html

javascript

arrays

random

mathjs