stackoom
  简体   繁体   中英

Random image from html on button click

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

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. And I need only JavaScript, no jQuery, alse i can not change the html, and it has to work for any number of images. 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>

5 answers

solution1
 0  2020-09-05 18:54:33

welcome to 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

and remember that you have a <div> as placeholder, so you can't assign src , only if you change it to <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>

solution2
 0 ACCPTED  2020-09-05 19:05:00

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

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

solution4
 0  2020-09-06 03:09:13

You can do this with plain javascript like this: 

 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: 

 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>

solution5
 0  2021-12-31 09:13:47

Try this: this is my image in HTML file

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

my javascript file

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

everytime you click button you get a new image

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Random Background Image from Button Click Random image on button click Javascript random image on click button Get Random Image with Button Click with Javascript Javascript Random image with text on click button Insert Image on HTML button click How to download HTML canvas drawing as image from button click converting from html to png image on initial button click download image that generated from html2canvas on button click Trying to have a random image and random sound play on button click
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM