функции в чистом JavaScript не видят глобальные переменные

132

22 сентября 2021, 02:40

На курсах задали сделать анимацию. У меня есть по классике три файлика html, сss и js. Суть в том, что анимация должна срабатывать при клике по сайту. Точнее при клике в таблицу стилей должны записываться конкретные свойства для конкретных блоков. Если объявлять переменные внутри функций, то всё работает. Но если их вытянуть наружу, то функции перестают их видеть. Как можно решить эту проблему? Ибо не очень хочется копировать один и тот же блок переменных для каждой функции.

Код html:

var cat_in_submarine = document.getElementById("cat-in-submarine"); 
var submarine = document.getElementById("submarine"); 
var bubble = document.getElementById("bubble"); 
var torpedo = document.getElementById("torpedo"); 
 
function start_active_animation() { 
 
 
  fading(); 
  setTimeout(stop_passive_animation, 2); 
} 
 
function fading() { 
  cat_in_submarine.style.transition = '2s'; 
  cat_in_submarine.style.opacity = '0'; 
 
  submarine.style.transition = '2s'; 
  submarine.style.opacity = '0'; 
 
  bubble.style.transition = '2s'; 
  bubble.style.opacity = '0'; 
 
  torpedo.style.transition = '2s'; 
  torpedo.style.opacity = '0'; 
} 
 
function stop_passive_animation() { 
  cat_in_submarine.style.opacity = '1'; 
  submarine.style.opacity = '1'; 
  bubble.style.opacity = '1'; 
  torpedo.style.opacity = '1'; 
}

<div id="animation" onclick="start_active_animation()"> 
  <div id="stars"></div> 
  <div id="polar-lights"></div> 
  <div id="water-background"></div> 
  <div id="iceberg"> 
    <div class="iceberg iceberg-bottom"></div> 
    <div class="iceberg iceberg-top"></div> 
  </div> 
  <div id="water-foreground"></div> 
  <div id="submarine"> 
    <div id="cat-in-submarine"></div> 
    <img id="bubble" src="Img\Bubble.png" alt="bubble"> 
  </div> 
  <div id="torpedo"></div> 
</div>

Answer 1

Попробуйте поместить всё в блок

window.onload = function(){
    var cat_in_submarine = document.getElementById('cat_in_submarine');
    ...
    function start_active_animation(){
        ...
    }
    ...
}

или поставив в объявление скрипта

<script src="Script.js" defer>

Дело в том, что в случае с глобальными переменными их присвоение происходит до парсинга самих элементов, так как страница создаётся по порядку. Желательно подключают скрипты перед