CODEWITHSUNDEEP
javascripthtmlonmouseoveronmouseout
Sam
Sam

Reputation: 2341

Using this and document.getElementById within an img onmouseover function

I'm trying to change an image and the text inside an h2 using onmouseover and onmouseout, like in this gif

enter image description here

I give some examples below where I can change the image with onmouseover and onmouseout using either this or document.getElementById, but when I use this I can't figure out how to simultaneously change the text inside the h2 tag(like in the example under document.getElementById). Using the following snippet does not change the image.

onmouseover='(function(){
                this.src="https://i.imgur.com/dsF2mgL.jpg"
                document.getElementById("message").innerHTML="I am so very tired"
            })()'

I am looking for a way to use this and change both the image and the text inside the h2

Using document.getElementById

    <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>

Using 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>

Upvotes: 0

Views: 377

Answers (3)

Umutambyi Gad
Umutambyi Gad

Reputation: 4101

use nextElementSibling selector to ahive it

<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"
    nextElementSibling.textContent="I am so very tired"' onmouseout='this.src="https://i.imgur.com/PKi5s3p.jpg"
    nextElementSibling.textContent="Now I am wide awake!"'>
<h2 id="message">I am Drake the Duck.</h2>

Upvotes: 0

obscure
obscure

Reputation: 12891

The this keyword alone won't get you far as it is just a reference to the element that caused the event i.e. the <img> element in your case.

However if the <h2> element is always the next sibling after your <img> you can query the image's .nextElementSibling property to get a reference to the <h2> and assign the text.

Here's an example:

<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>

Upvotes: 1

Barmar
Barmar

Reputation: 781741

Don't use an IIFE in the onclick attribute, because this is not inherited by functions (unless you use an arrow function). You can just put the code directly in the onclick attribute without the function wrapper.

<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>

Upvotes: 1

Related Questions