Как сделать так чтобы ссылка и картинка в блоке появльялись рандомно и были подходящими друг другу?

Question

[Salim]

Здраствуйте , я сделал так чтобы картинка каждый раз у меня появльялась разным но как сделать так чтобы у него еще и была ссылка и чтобы для соотвествующий ссылки была соотвествующая картинка? (P.s: он фиксированный)
вот Код:

<div class="main_adsense_box">
        <img id="reklam_img">
    </div>

.main_adsense_box {
    width: 30vh;
    margin-left: 76%;
    margin-top: 20%;
    position: absolute;
    min-height: 73%;
}

#reklam_img {
    width: 100%;
    height: 50%;
    position: sticky;
    top: 20vh;
}

let imgs = ['../0.jpg', '../1.jpg', '../2.jpg', '../3.jpg', '../4.jpg']; //   Добавьте свои картинки через запятую
let i = Math.floor(Math.random() * imgs.length);
let image2 = document.getElementById("reklam_img");
imgsrc(); // Первоначальное заполнение картинки
image2.onclick = imgsrc;

function imgsrc() {
    image2.src = imgs[i]; // Увеличить индекс лучше потом
    if (++i === imgs.length) i = 0;
}

Comments

[MrColdCoffee]

ничего не понятно, но очень интересно

[Salim]

MrColdCoffee, :) просто надо сделать так чтобы одновременно Рандомно создался и ссылка и картинка но чтобы они соотвествовали друг-другу ( Допустим у меня есть 5 фото и 5 ссылок и мне надо сделать так чтобы рандомно и одновременно создался и картинка и ссылка так чтобы (если первая картинка то у него было первая ссылка , если вторая картина то вторая ссылка и т.д) вроде смог обяснить))

[deantek]

Salim, а кинуть и ссылку и картинку в массив нельзя?

const banner = [{img: '../0.jpg, link: '0.com'}, {img: '../1.jpg', link: '1.com'}]

[Salim]

deantek, а как тогда ввыодить их рандомно? тут надо сделать так чтобы он каждый раз создавал тег img и добавлял в них свойства.

[MrColdCoffee]

Salim,

let rnd = banner[  Math.floor(Math.random() * banner.length)];
console.log(rnd['link'] );
console.log(rnd['img'] );

[Salim]

MrColdCoffee, и еще есть такая проблема что в консоле то да, это работает но может я что-то не понимаю но при выводе в Html это не будет работать потому что эму надо тег создать, разве нет? извените если туплю

[MrColdCoffee]

Salim, покажите код "вывода в html"

[Aetae]

Salim, image2.src = imgs[i]['link'];

[Salim]

let imgs = ['../0.jpg', '../1.jpg', '../2.jpg', '../3.jpg', '../4.jpg']; //   Добавьте свои картинки через запятую
let links = ['link' , 'link' , 'link', 'link' , 'link']; //   Добавьте свои ссылки через запятую

let i = Math.floor(Math.random() * imgs.length);

var a = document.createElement('a');
a.href = links[i];
a.target = '_target-blank'

var image = document.getElementById("adsense_box").getElementsByTagName('img')[0];
b = a.appendChild(image);
document.getElementById("adsense_box").appendChild(a);

let image2 = document.getElementById("reklam_img");
image2.src = imgs[i];

Вот код если кому то понадобится. (выводить рандомную картинку с соотвествуюшей ссылкой)