Проблема в том, что есть два скрипта, которые написаны последовательно друг за другом и мне нужно сделать так, что бы они выполнялись независимо друг от друга. Написаны два небольших скрипта js раскинуты по двум файлам и привязаны к html документу. Суть в том, что скрипт должен переключать картинку при нажатии. В двух скриптах различаются только вводимые изображения. После того как все привязано заходишь на сайт и картинки для двух разных элементов одинаковые. Как сделать так, что бы для разных элементов загружались разные картинки, а не только с первого скрипта? Скрипты привязаны к элементам через document.getElementById
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="/css/material-background-styles.css">
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script async src="skril.js"></script>
<script async src="script.js"></script>
</head>
<body>
<div class="header">
<form class="from" action="https://www.ableton.com" method="get" target="_blank">
<button class="button" type="submit">Ableton</button>
</form>
<form class="from" action="https://xferrecords.com/products/serum" method="get" target="_blank">
<button class="button" type="submit">Serum</button>
</form>
<p class="text">Ableton Live!</p>
</div>
<div>
<div class="body">
<div class="overlay">
<div class="menu">
<p class="menu-header">Menu</p>
<h6 class="menu-text" href="#postbox" onclick="slowScroll('#postbox')">Skrillex</h6>
<h6 class="menu-text-1" href="#postbox-1" onclick="slowScroll('#postbox-1')">Marshmello</h6>
<script type="text/javascript">
function slowScroll(id) {
var offset = 0;
$('html, body').animate({
scrollTop: $(id).offset().top - offset
}, 750);
return false;
}
</script>
</div>
<div class="box-text">
<p class="box-text-header">Название статьи</p>
<h1>Не следует, однако забывать, что начало повседневной работы по формированию позиции в значительной степени обуславливает создание соответствующий условий активизации. Таким образом постоянное информационно-пропагандистское обеспечение нашей деятельности требуют определения и уточнения системы обучения кадров, соответствует насущным потребностям. Товарищи! рамки и место обучения кадров влечет за собой процесс внедрения и модернизации форм развития. Равным образом начало повседневной работы по формированию позиции обеспечивает широкому кругу (специалистов) участие в формировании направлений прогрессивного развития. Таким образом реализация намеченных плановых заданий способствует подготовки и реализации дальнейших направлений развития. Равным образом постоянное информационно-пропагандистское обеспечение нашей деятельности в значительной степени обуславливает создание новых предложений.</h1>
</div>
</div>
</div>
</div>
<div>
<div class="postbox" id="postbox">
<img id="img1" src="https://sun9-14.userapi.com/c850608/v850608486/3b65c/EpoUHJDOmvM.jpg" class="img">
<iframe frameborder="0" class="yandex" style="border:none;" src="https://music.yandex.ru/iframe/#album/1892488">Слушайте <a href='https://music.yandex.ru/album/1892488'>Recess</a> — <a href='https://music.yandex.ru/artist/419326'>Skrillex</a> на Яндекс.Музыке</iframe>
</div>
</div>
<div>
<div class="postbox-1" id="postbox-1">
<img id="Click1" src="https://www.nastol.com.ua/pic/201608/1920x1200/nastol.com.ua-185980.jpg" class="img1">
<iframe frameborder="0" class="yandex" style="border:none;" src="https://music.yandex.ru/iframe/#album/3163341">Слушайте <a href='https://music.yandex.ru/album/3163341'>Joytime</a> — <a href='https://music.yandex.ru/artist/4004846'>Marshmello</a> на Яндекс.Музыке</iframe>
</div>
</div>
<div class="footer-div">
<footer class="footer">
<form class="from" action="https://owsla.com" method="get" target="_blank">
<button class="Owsla" type="submit">Owsla</button>
</form>
</footer>
</div>
</body>
</html>
Вот для первой
var images = [
'https://pbs.twimg.com/media/Di28lMmXoAISAiI.jpg',
'https://avatars.mds.yandex.net/get-pdb/1530860/f1457cb9-150e-420e-9c1a-88da163c7d80/s1200 ',
'https://sun9-14.userapi.com/c850608/v850608486/3b65c/EpoUHJDOmvM.jpg',
];
var img = document.getElementById( 'img1' ),
index = 0;
img.onclick = function() {
index++;
if (index == images.length) index = 0;
this.src = images[index];
};
Вот для второй картинки
var images = [
'https://avatars.mds.yandex.net/get-pdb/1749846/93a3b84a-852a-4264-9484-4f86a3b464a9/s1200?webp=falseg',
'https://www.tokkoro.com/picsup/2610391-marshmello-wallpaper-free.jpg',
'https://avatars.mds.yandex.net/get-pdb/1771637/8e3b4638-1a20-437e-9f1d-0e4b72ef1576/s1200',
];
var img = document.getElementById( 'Click1' ),
index = 0;
img.onclick = function() {
index++;
if (index == images.length) index = 0;
this.src = images[index];
};
