I would like to display a random picture with a relative text everytime I load the page. So in order to have Image1 with text1, Image2 with text2 ....
Here is my code :
html :
<link href="app.css" rel="stylesheet" />
<script src="random-picture.js"></script>
<div class="
content-with-two-section-2 content-1
padding-top-8 grey-background
">
<div class="hero-content-with-image">
<img id="randomImages" alt="hero-image">
</div>
<div class="">
<div id="" class="section-text-1">
<h1>RANDOM 1
<p>random1</p>
</div>
</div>
<div class="">
<div id="" class="section-text-2">
<h1>RANDOM 2
<p>random2</p>
</div>
</div>
<div class="">
<div id="" class="section-text-3">
<h1>RANDOM 3
<p>random3</p>
</div>
</div>
</div>
I put all classes as display:none; on my css file :
.section-text-1, .section-text-2, .section-text-3 {
display: none;
}
And this is my js file :
var image = new Array();
image[0] = "image1.png";
image[1] = "image2.png";
image[2] = "image3.png";
var size = image.length
var x = Math.floor(size * Math.random())
jQuery('#randomImages').attr('src', image[x]);
Thanks a lot for your help !!!!
You can do as follows:
Enumerating class names is not necessary (you can use '.section-text' alone, because after querying you will get an array with indexes corresponding to the elements order in DOM).
const sources = [
'image1.png',
'image2.png',
'image3.png'
];
const img = document.getElementById('randomImages');
const sections = document.getElementsByClassName('section-text');
const index = Math.floor(sources.length * Math.random());
img.alt = sources[index];
img.src = sources[index];
sections[index].style.display = 'block';.section-text {
display: none;
}<div class="content-with-two-section-2 content-1 padding-top-8 grey-background">
<div class="hero-content-with-image">
<img id="randomImages">
</div>
<div>
<div class="section-text">
<h1>RANDOM 1</h1>
<p>random1</p>
</div>
</div>
<div>
<div class="section-text">
<h1>RANDOM 2</h1>
<p>random2</p>
</div>
</div>
<div>
<div class="section-text">
<h1>RANDOM 3</h1>
<p>random3</p>
</div>
</div>
</div>As an alternative (suggested in comments):
const sources = [
{
src: 'image1.png',
title: 'Image 1',
text: 'This is text 1'
},
{
src: 'image2.png',
title: 'Image 2',
text: 'This is text 2'
},
{
src: 'image3.png',
title: 'Image 3',
text: 'This is text 3'
}
];
const image = document.getElementById('image');
const title = document.getElementById('title');
const text = document.getElementById('text');
const index = Math.floor(sources.length * Math.random());
const source = sources[index];
image.alt = source.src;
image.src = source.src;
title.innerText = source.title;
text.innerText = source.text;<div class="content-with-two-section-2 content-1 padding-top-8 grey-background">
<div class="hero-content-with-image">
<img id="image">
</div>
<div>
<div class="section-text">
<h1 id="title"></h1>
<p id="text"></p>
</div>
</div>
</div>You need to use some sort of shuffling algorithm to output random pictures.
function randomPic(arr){
const arrLength = arr.length;
for (let i = 0; i < 100; i++ ) {
const indexOne = Math.floor(Math.random() * arrLength);
const indexTwo = Math.floor(Math.random() * arrLength);
const tempValue = arr[indexOne];
arr[indexOne] = arr[indexTwo];
arr[indexTwo] = tempValue
}
return arr
}
const sources = [
{
src: 'https://image1.png',
title: 'Title 1',
text: 'This is text 1'
},
{
src: 'https://image2.png',
title: 'Title 2',
text: 'This is text 2'
},
{
src: 'https://image3.png',
title: 'Title 3',
text: 'This is text 3'
}
];
console.log(randomPic(sources))