CODEWITHSUNDEEP
javascript
AntunCrnja
AntunCrnja

Reputation: 119

Show random content from array

I'm working on a web site that shows random articles in the footer. Random articles should be 4 and these articles should not be duplicated. How to make a loop through arrays to make it work.

Here is the code and fiddle for one article I made. Thanks!

FIDDLE: https://jsfiddle.net/3db8Leor/1/

HTML:

<section class="cities">
  <a class="city" target="_blank">
    <img src="" width="200">
    <h2></h2>
  </a>
  <!--
  <a class="city" target="_blank">
    <img src="" width="200">
    <h2></h2>
  </a>

  <a class="city" target="_blank">
    <img src="" width="200">
    <h2></h2>
  </a>

  <a class="city" target="_blank">
    <img src="" width="200">
    <h2></h2>
  </a>
  -->
</section>

JS:


const link = [
'https://www.croatiaweek.com',
'https://www.pinebeach.hr/', 
'https://www.dnevnik.hr/', 
'https://www.costacruises.com/',
'https://www.zadar.hr/',
'https://www.croatia.hr/'
];


const title = [
'Zagreb - Croatia',
'Pakostane - Croatia', 
'Hvar - Croatia', 
'Dubrovnik - Croatia',
'Zadar - Croatia',
'Brac - Croatia'
];

const image = [
'https://www.croatiaweek.com/wp-content/uploads/2015/02/KingTomislav.jpg', 
'https://www.pinebeach.hr/photos/modul_2/18052017224635_pine-beach-pakostane-0020.jpg', 
'https://image.dnevnik.hr/media/images/920x695/Jul2019/61719533.jpg', 
'https://www.costacruises.com/content/dam/costa/inventory-assets/ports/DBV/24-DUBROVNIK_2880x1536.jpg.image.750.563.low.jpg',
'https://www.hdz-zadar.hr/public/img/home/3_mobile.png',
'https://s27135.pcdn.co/wp-content/uploads/2019/06/Brac-island-878x585.jpg.optimal.jpg'
];

const random = Math.floor(Math.random() * title.length);
const city = document.querySelector('.city');

city.href = link[random];
city.querySelector('h2').innerHTML = title[random];
city.querySelector('img').src = image[random];

Upvotes: 2

Views: 71

Answers (2)

Mamun
Mamun

Reputation: 68943

You can first generate an array of unique random numbers, then in each loop you can use the index to set the images like the following way:

const link = [
  'https://www.croatiaweek.com',
  'https://www.pinebeach.hr/', 
  'https://www.dnevnik.hr/', 
  'https://www.costacruises.com/',
  'https://www.zadar.hr/',
  'https://www.croatia.hr/'
];

const title = [
  'Zagreb - Croatia',
  'Pakostane - Croatia', 
  'Hvar - Croatia', 
  'Dubrovnik - Croatia',
  'Zadar - Croatia',
  'Brac - Croatia'
];

const image = [
  'https://www.croatiaweek.com/wp-content/uploads/2015/02/KingTomislav.jpg', 
  'https://www.pinebeach.hr/photos/modul_2/18052017224635_pine-beach-pakostane-0020.jpg', 
  'https://image.dnevnik.hr/media/images/920x695/Jul2019/61719533.jpg', 
  'https://www.costacruises.com/content/dam/costa/inventory-assets/ports/DBV/24-DUBROVNIK_2880x1536.jpg.image.750.563.low.jpg',
  'https://www.hdz-zadar.hr/public/img/home/3_mobile.png',
  'https://s27135.pcdn.co/wp-content/uploads/2019/06/Brac-island-878x585.jpg.optimal.jpg'
];

const city = document.querySelectorAll('.city');
var arr = [];
while(arr.length < city.length){
  var r = Math.floor(Math.random() * title.length);
  if(arr.indexOf(r) === -1) arr.push(r);
}
city.forEach(function(c, i){ 
  c.href = link[arr[i]];
  c.querySelector('h2').innerHTML = title[arr[i]];
  c.querySelector('img').src = image[arr[i]];
});
<section class="cities">
  <a class="city" target="_blank">
    <img src="" width="200">
    <h2></h2>
  </a>
  
  <a class="city" target="_blank">
    <img src="" width="200">
    <h2></h2>
  </a>

  <a class="city" target="_blank">
    <img src="" width="200">
    <h2></h2>
  </a>

  <a class="city" target="_blank">
    <img src="" width="200">
    <h2></h2>
  </a>
  
</section>

Upvotes: 2

MrMalt
MrMalt

Reputation: 42

Since this is a very simple use case where you only need 4 random indices, you can do something like this jsfiddle (updated yours):

https://jsfiddle.net/fceLu5mq/

Basically:

function pickFour(max) {
    const indices = [];
    while (indices.length < 4) {
      const nextRand = Math.floor(Math.random()*max);
      if (!indices.includes(nextRand)) {
        indices.push(nextRand);
      }
    }
    return indices;
}

Upvotes: 1

Related Questions