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.
JavaScript
x
28
28
1
window.addEventListener('load', start, false);2
3
function start() {4
5
var butt = document.getElementsByTagName('button')[0];6
var rnImg = document.getElementsByClassName('ekran');7
var pictures = document.getElementsByTagName('img');8
var choose = Math.floor(Math.random()*pictures.length);9
10
butt.addEventListener('click', menjaj, false);11
12
function menjaj(e) {13
var new = e.button;14
15
var img = [];16
17
for(var i = 0; i< pictures.length; i++) {18
var dodaj = img[i];19
img.push(dodaj);20
}21
22
//ekran.src = 'slike/' + slike[izbor] + '.jpg';23
}24
25
26
27
28
}JavaScript
1
19
19
1
<body>2
<div class="wrapper">3
<div>4
<img src="slike/leto1.jpg" alt="leto1">5
<img src="slike/leto2.jpg" alt="leto2">6
<img src="slike/leto3.jpg" alt="leto3">7
<img src="slike/leto4.jpg" alt="leto4">8
<img src="slike/leto5.jpg" alt="leto5">9
<img src="slike/leto6.jpg" alt="leto6">10
<img src="slike/leto7.jpg" alt="leto7">11
<img src="slike/leto8.jpg" alt="leto8">12
<img src="slike/leto9.jpg" alt="leto9">13
</div>14
<div>15
<button type="button">choose</button>16
</div>17
<div class="rndmImage"></div>18
</div>19
</body>Advertisement
Answer
This is a working snippet of your code:
JavaScript
1
29
29
1
window.addEventListener('load', start, false);2
3
function start () {4
var butt = document.getElementsByTagName('button')[0];5
var rnImg = document.getElementsByClassName('rndmImage')[0]; //Change selector to existing class and select the first (the only) one6
var pictures = document.getElementsByTagName('img');7
8
butt.addEventListener('click', menjaj, false);9
10
function menjaj (e) {11
// var new = e.button;// 'new' is reserved word in JS, you can't use it as variable name12
// var btn = e.button;// but this line is useless13
var choose = Math.floor(Math.random() * pictures.length); //better move this line inside this function to get rundom image every button clicks14
15
var img = document.createElement('img'); //creates new img tag16
img.src = pictures[choose].src;17
rnImg.innerHTML = ''; //to delete previous image18
rnImg.appendChild(img);19
// var img = []; //useless lines of code20
21
// for(var i = 0; i< pictures.length; i++) {22
// var dodaj = img[i];23
// img.push(dodaj);24
// }25
26
//ekran.src = 'slike/' + slike[izbor] + '.jpg';27
}28
}29