this.nextChild come up undefined - mouseover/mouseout

Question

Я студент и до сих пор учился, поэтому извиняюсь, если это глупый вопрос. Обычно я могу понять это, просеивая другие вопросы здесь, но я, похоже, застрял на этот раз.

Я просто пытаюсь сделать простую мышь/мышь, где, когда вы наводите мышью на изображение, изображение исчезает, а текст в привязном теге изменяется на название ссылки (то есть наведите указатель мыши на значок дома и он исчезает и заменяется «HOME»). У меня эта часть работает нормально, но я не могу заставить ее переключиться на значок, когда мышь покидает ссылку. Это текущий HTML для ссылки:

<li class="linksLi"> 
    <a id="#homeLink" data-namesrc="HOME" class="linksA"> 
     <img src="img/home.svg" alt="Home Icon" class="links"> 
    </a> 
</li> 

, а затем на JavaScript:

var linksImg = document.querySelectorAll(".links"); 
var linksName = document.querySelectorAll(".linksA"); 

function changeImg() { 
    this.classList.add("hide"); 
    this.parentElement.innerHTML = this.parentElement.dataset.namesrc; 
} 

function changeName() { 
    this.innerHTML = ""; 
    this.nextChild.classList.remove("hide");  
} 


for (var i=0;i<linksImg.length;i++) { 
    linksImg[i].addEventListener("mouseover", changeImg, false); 
} 

for (var j=0;j<linksName.length;j++) { 
    linksName[j].addEventListener("mouseleave", changeName, false); 
} 

changeImg() прикрепляется к IMG тегу и changeName() крепится к анкерной теге. Но моя проблема в changeName(), когда я пытаюсь удалить класс «скрыть» от дочернего элемента, он сообщает мне, что ребенок не определен (хотя тег img явно находится внутри тега в HTML). Я видел много вещей, связанных с узлами и пробелами, которые я не совсем понимаю, поэтому я понятия не имею, если это проблема. Может быть, это действительно основная проблема, и я пропускаю что-то действительно очевидное, я понятия не имею, но любая помощь будет принята с благодарностью!

JAVASCRIPT ТОЛЬКО ПОЖАЛУЙСТА, нет jQuery!

Answer 1

Попробуйте принимать событие в качестве параметра функции и с помощью «event.target» вместо «это»

function changeImg(evt) { 
    evt.target.classList.add("hide"); 
    evt.target.parentElement.innerHTML = evt.target.parentElement.dataset.namesrc; 
} 

«это» хитрая ключевое слово в JavaScript, который может быть много вещей, в зависимости от как вызывается функция.

И JSFiddle для вас.

EDIT Я обновил JSFiddle, чтобы добавить/удалить интервал вместо установки innerHTML.

Answer 2

Благодарим за ответы! Для кого-то интересно, я также получил его работу, сделав img и привязку тегов, а не img, являющимся дочерним элементом привязанного тега. Таким образом, я мог бы просто настроить nextSibling в js, а проблема innerHTML, создающая пустой тег привязки и удаление img, уже не проблема.