Clash Royale CLAN TAG#URR8PPP

how to show random images when when click on button using javascript

I am new to javascript so don't have that much knowledge of js so I have requirement of generate random images when click on button, images are displaying using php(codeigniter framework) how to show random images on every click like a.jpg should come first sometimes last or b.jpg should come first or last

<img src="<?=base_url('assets/game/a.jpg')?>" style="width:120px;"><br>
<img src="<?=base_url('assets/game/b.jpg')?>" style="width:120px;"><br>
<img src="<?=base_url('assets/game/c.jpg')?>" style="width:120px;"><br>
<img src="<?=base_url('assets/game/d.jpg')?>" style="width:120px;"><br>
<img src="<?=base_url('assets/game/e.jpg')?>" style="width:120px;"><br>

<button class="btn btn-success clk_btn" onclick="myfunction">generate random imgaes</button>


javascript

<img id="Image_1"...

"Image_5"

"show" or

3 Answers
3

Here is an example, just replace the div with your images, also you might want to change the numbers based on the amount of pictures.

function random ()
const randomNr = Math.random()*100;
const elements = document.querySelectorAll('div');

elements.forEach((el) => el.style.display = 'none')

if (randomNr < 34)
elements[0].style.display = 'block';
else if(randomNr < 64)
elements[1].style.display = 'block';
else
elements[2].style.display = 'block';



div
display: none;


<div>image1</div>
<div>image2</div>
<div>image3</div>

<button onclick="random()">switch</button>

You can try this code.

// Javascript
var images = [
"<?=base_url('assets/game/a.jpg')?>",
"<?=base_url('assets/game/b.jpg')?>",
"<?=base_url('assets/game/c.jpg')?>",
"<?=base_url('assets/game/d.jpg')?>",
"<?=base_url('assets/game/e.jpg')?>"
];

document.getElementById("my_button").addEventListener("click", function()
document.getElementById("my_image").src = images[Math.floor(Math.random()*5)%5]
)

<!-- HTML -->
<button id="my_button">Generate random image</button>
<br>
<img id="my_image" style="width:120px;"/>

Documentation:

A possibility is to hide all images by adding a "hidden" attribute and on the click, choose a random one and remove that "hidden" attribute ;)

let images = document.getElementsByTagName('img');
for(let i = 0; i < images.length; i++)
images[i].setAttribute('hidden', true);



function myfunction()

let images = document.getElementsByTagName('img');

for(let i = 0; i < images.length; i++)
images[i].setAttribute('hidden', true);
let rand = Math.floor(Math.random()*images.length);
images[rand].removeAttribute('hidden');


<img src="http://via.placeholder.com/350?text=A" style="width:120px;"><br>
<img src="http://via.placeholder.com/350?text=B" style="width:120px;"><br>
<img src="http://via.placeholder.com/350?text=C" style="width:120px;"><br>
<img src="http://via.placeholder.com/350?text=D" style="width:120px;"><br>
<img src="http://via.placeholder.com/350?text=E" style="width:120px;"><br>

<button class="btn btn-success clk_btn" onclick="myfunction()">generate random imgaes</button>

<p id="result"></p>

const images = document.getElementsByTagName('img');

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.