-1

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>
Alex
  • 19
  • 3

5 Answers5

0

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>
balexandre
  • 73,608
  • 45
  • 233
  • 342
0

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';
    }
}
Yevhenii Shlapak
  • 588
  • 2
  • 4
  • 13
0
<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);
}
sabban
  • 131
  • 5
0

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>
Aaron Plocharczyk
  • 2,776
  • 2
  • 7
  • 15
0

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

Ashutosh Nagrale
  • 13
  • 2