.setAttribute. ReferenceError: element is not defined

199

19 сентября 2018, 15:50

Имеется 2 кнопки. Каждая имеет отдельную функцию по клику. Первая вызывает слайдер с одними картинками, другая - с другими.

При клике на первую кнопку - всё работает: в функции через setAttribute присваиваются значения в атрибут src. При клике на вторую кнопку вылетает ошибка - ReferenceError: my_img1 is not defined.

Гугл показывал варианты, что html код ещё не прогружен в момент вызова функции, но я не понимаю почему, ведь при вызове первой кнопки всё работает. Так же я пытался удалять атрибут через removeAttribute, а потом снова его присваивать, но это тоже не принесло никаких результатов.

Проще говоря, я хочу сделать так, чтобы при клике по одной кнопке функция загружала картинки в этот слайдер, и он показывал эти картинки. При клике на другую кнопку - другие картинки загружались и так же показывались.

Уже не знаю, какими извращениями это можно сделать, всю голову сломал :( Помогите, пожалуйста.

Код прилагается:

function ImageLoader1() { 
  my_img1.setAttribute("src", "http://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg"); 
  my_img2.setAttribute("src", "http://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg"); 
  my_img3.setAttribute("src", "http://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg"); 
  my_img4.setAttribute("src", "http://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg"); 
  my_img5.setAttribute("src", "http://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg"); 
  PopUpShow(); 
} 
 
function ImageLoader2() { 
  my_img1.setAttribute("src", "http://www.cruzo.net/user/images/k/ecc3ecf42c75db1ffce5d06cbe95b1e6_644.jpg"); 
  my_img2.setAttribute("src", "http://www.cruzo.net/user/images/k/ecc3ecf42c75db1ffce5d06cbe95b1e6_644.jpg"); 
  my_img3.setAttribute("src", "http://www.cruzo.net/user/images/k/ecc3ecf42c75db1ffce5d06cbe95b1e6_644.jpg"); 
  my_img4.setAttribute("src", "http://www.cruzo.net/user/images/k/ecc3ecf42c75db1ffce5d06cbe95b1e6_644.jpg"); 
  my_img5.setAttribute("src", "http://www.cruzo.net/user/images/k/ecc3ecf42c75db1ffce5d06cbe95b1e6_644.jpg"); 
  PopUpShow(); 
} 
 
 
function PopUpShow() { 
  $("#popup1").fadeIn(500); 
} 
 
 
function PopUpHide() { 
  $("#popup1").fadeOut(500); 
}

.popup_btn { 
  font-size: 20px; 
  cursor: pointer; 
  border-radius: 5px; 
  background-color: #C0C0C0; 
  padding: 0.2em 1em; 
} 
 
.b-popup { 
  display: none; 
  width: 100%; 
  min-height: 100%; 
  background-color: rgba(0, 0, 0, 0.5); 
  overflow: hidden; 
  position: fixed; 
  top: 0px; 
} 
 
.b-popup .b-popup-content { 
  margin: 40px auto 0px auto; 
  width: 90%; 
  height: 90%; 
  padding: 10px; 
  background-color: transparent; 
} 
 
#FANIPOL, 
#GLOSSREITER { 
  background-color: lightgrey; 
  margin-top: 10px; 
  padding: 10px; 
}

<link href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> 
<!-- 3 KB --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
 
<div> 
  <a id="FANIPOL" onclick="ImageLoader1();">Просмотр</a> 
  <a id="GLOSSREITER" onclick="ImageLoader2();">Просмотр</a> 
</div> 
 
<!-- Gallary --> 
<div class="b-popup" id="popup1"> 
  <div class="b-popup-content"> 
    <center> 
      <div class='fotorama' data-height='80%'> 
        <img id="my_img1"> 
        <img id="my_img2"> 
        <img id="my_img3"> 
        <img id="my_img4"> 
        <img id="my_img5"> 
      </div> 
    </center> 
    <center><a class="popup_btn" onclick="PopUpHide();">Закрыть</a></center> 
  </div> 
</div> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>

Answer 1

var my_img1 = document.getElementById("my_img1");
...
var my_img5 = document.getElementById("my_img5");

Answer 2

id'шник не прописался, надёжнее объявлять явно

var my_img1 = document.getElementById('my_img1')

UPD:

<div class="fotorama"
     data-auto="false"></div>
<script>
  $('.fotorama').fotorama({
    data: [
      {img: '1.jpg', thumb: '1-thumb.jpg'},
      {img: '2.jpg', thumb: '2-thumb.jpg'}
    ]
  });
</script>