javascript изменить текст на текст элемента alt на hover

Question

У меня есть серия изображений, и, при наведении, я бы хотел, чтобы они изменили текст элемента <span>. Я сделал это раньше с помощью некоторого очень избыточного javascript, меняя текст <span> на каждый onMouseIn и onMouseOut для каждого изображения, каждый с уникальным идентификатором. Я использовал этот код, повторяется несколько раз:

window.onload = function() { 
document.getElementById("foo").onmouseover = function() { 
    document.getElementById("element").innerHTML = "bar"; 
}; 

document.getElementById("foo").onmouseout = function() { 
    document.getElementById("element").innerHTML = "bar"; 
}; 

Но мне было интересно, если есть более простой способ сделать это, используя alt тег изображения. При наведении изображения я бы хотел, чтобы тег <span> отображал текст alt наведенного изображения, а onMouseOut - нормальный. Как это будет сделано? Благодарю.

Answer 1

Вы можете получить все элементы на странице, используя имя тега, как показано ниже, и добавить обработчики событий

window.onload = function() { 
 
    var imgs = document.getElementsByTagName('img'), 
 
    span = document.getElementById("element"); 
 
    for (var i = 0; i < imgs.length; i++) { 
 
    imgs[i].addEventListener('mouseenter', function() { 
 
     span.innerHTML = this.alt || ''; 
 
    }); 
 
    imgs[i].addEventListener('mouseleave', function() { 
 
     span.innerHTML = ''; 
 
    }); 
 
    } 
 
}

<span id="element"></span> 
 
<br /> 
 
<img src="//placehold.it/64X64&text=1" alt="img 1" /> 
 
<img src="//placehold.it/64X64&text=2" alt="img 2" /> 
 
<img src="//placehold.it/64X64&text=3" alt="img 3" /> 
 
<img src="//placehold.it/64X64&text=4" alt="img 4" />

Если вы не хотите, чтобы предназначаться все элементы IMG, то вам может добавить класс ко всем изображениям, которые должны вызвать его, а затем использовать document.getElementsByClassName('classname') вместо document.getElementsByTagName('img')