JavaScript глобальную переменную в функции и .hover

Question

У меня есть этот код в JavaScript:

status = document.getElementById('status2'); 

$('#slider > img').hover(
    function() { 
     stopLoop(); 
     status.innerHTML = "paused"; 
    }, 
    function() { 
     startSlider(); 
     status.innerHTML = "playing"; 
    } 
); 

где я смотрю на все изображения в моем HTML, которые имеют ползунок ID и когда я зависать на то я хочу, чтобы добавить слово (приостановлено или воспроизведено) тегу span, который имеет статус id2. Но я не знаю, почему глобальная переменная не работает, единственный способ, которым я делаю это работа ставит локальную переменную внутри каждого несильно, как это:

function() { 
    stopLoop(); 
    var status = document.getElementById('status2'); 
    status.innerHTML = "paused"; 
}, 
function() { 
    startSlider(); 
    var status = document.getElementById('status2'); 
    status.innerHTML = "playing"; 
} 

Может кто-нибудь мне, почему?

ПРИМЕЧАНИЕ: как я уже говорил, все работает с локальными переменными, но не устанавливает его как глобальную переменную.

Answer 1

Потому что к тому времени, вы бежите

status = document.getElementById('status2'); 

DOM не была готова, так что вы получите статус не определен, и поэтому он не будет работать дальше.

Так как поместить код в ready

$(document).ready(function(){ 
    //code goes here 
}) 

или

Поместите скрипт в конец файла.

Answer 2

ли добавить в

$(document).ready(function(){ 

}); 

Это ждет, чтобы выполнить код внутри, пока все не закончится загрузка. Таким образом, он не должен возвращаться не определен.

ТАКЖЕ

я не мог не заметить, что вы, кажется, пытается дать несколько элементов один и тот же идентификатор.

Не используйте идентификаторы для нескольких элементов. Это не то, как они предназначены для использования, и они не работают таким образом. Если вы даете несколько элементов одному и тому же идентификатору, а затем попробуйте и стилизуете их с помощью CSS, он будет только стиль первого. Используйте класс. Если вы используете

document.getElementById(); 

, чтобы попытаться захватить несколько элементов с одинаковым ID, то сценарий будет только захватить первый элемент с таким идентификатором, потому что, учитывая, что это идентификатор, он ожидает, что только один элемент. Если вы хотите работать с несколькими элементами, использовать класс, а затем использовать

document.getElementsByClassName(); 

это будет захватить все элементы с этим классом. Так, например, говорят, что у вас есть четыре элемента span с классом «foo».Для того, чтобы захватить все эти и изменить текст, выполните следующие действия:

elements=document.getElementsByClassName("foo"); 
for (i=0; i<elements.length; i++){ 
elements[i].innerHTML='insert your text here'; 
} 

О глобальных и локальных переменных, глобальная переменная объявляется так:

global_variable='foo' 

и локальная переменная объявлена ​​следующим образом:

var local_variable='foo' 

Глобальная переменная может быть объявлена ​​в любом месте сценария и использоваться в любом месте сценария (и даже в других сценариях, прикрепленных к одному и тому же файлу HTML), тогда как локальный переменный если он объявлен внутри функции, может использоваться только внутри функции, или если вы объявляете ее вне функции, ее нельзя получить в пределах функции, если вы не передадите ей переменную.

Надеюсь, что это поможет!