Использование this и document.getElementById в функции img onmouseover - PullRequest
Новая
       87

Использование this и document.getElementById в функции img onmouseover

0 голосов
/ 07 августа 2020

Я пытаюсь изменить изображение и текст внутри h2, используя onmouseover и onmouseout, как в этом gif

image 

    <h2>ICE 14: Drake the Duck</h2>
    <img
        id="duck"   
        src="https://i.imgur.com/G8TcUqA.jpg"
        onmouseover='(function(){
            //this.src="./duck2.jpg"
            document.getElementById("duck").src="https://i.imgur.com/dsF2mgL.jpg"
            document.getElementById("message").innerHTML="I am so very tired"
        })()'
        onmouseout='(function(){
            document.getElementById("duck").src="https://i.imgur.com/PKi5s3p.jpg"
            document.getElementById("message").innerHTML="Now I am wide awake!"
        })()'
    >
    <h2 id="message">I am Drake the Duck.</h2>

Использование this

        <h2>ICE 14: Drake the Duck</h2>
        <img
            id="duck"   
            src="https://i.imgur.com/G8TcUqA.jpg"
            onmouseover='this.src="https://i.imgur.com/dsF2mgL.jpg"'
            onmouseout='this.src="https://i.imgur.com/PKi5s3p.jpg"'
        >
        <h2 id="message">I am Drake the Duck.</h2>

Ответы [ 3 ]

1 голос
/ 07 августа 2020

Ключевое слово this само по себе не поможет вам, поскольку это просто ссылка на элемент, вызвавший событие, то есть на элемент <img> в вашем случае.

Однако, если элемент <h2> всегда является следующим братом после вашего <img>. Вы можете запросить свойство изображения .nextElementSibling , чтобы получить ссылку на <h2> и присвоить текст.

Вот пример: 

<h2>ICE 14: Drake the Duck</h2>
<img id="duck" src="https://i.imgur.com/G8TcUqA.jpg" onmouseover='this.src="https://i.imgur.com/dsF2mgL.jpg";this.nextElementSibling.innerHTML="Now I am wide awake!"' onmouseout='this.src="https://i.imgur.com/PKi5s3p.jpg";this.nextElementSibling.innerHTML="I am so very tired!"'>
<h2 id="message">I am Drake the Duck.</h2>
1 голос
/ 07 августа 2020

Не используйте IIFE в атрибуте onclick, потому что this не наследуется функциями (если вы не используете стрелочную функцию). Вы можете просто поместить код прямо в атрибут onclick без оболочки функции. 

<h2>ICE 14: Drake the Duck</h2>
<img id="duck" src="https://i.imgur.com/G8TcUqA.jpg"
    onmouseover='this.src="https://i.imgur.com/dsF2mgL.jpg"; document.getElementById("message").innerHTML="I am so very tired"' 
    onmouseout='this.src="https://i.imgur.com/PKi5s3p.jpg"; document.getElementById("message").innerHTML="Now I am wide awake!"'>
<h2 id="message">I am Drake the Duck.</h2>
0 голосов
/ 07 августа 2020

используйте nextElementSibling селектор, чтобы создать улей

image

...