0
votes

Utilisation de this et document.getElementById dans une fonction img onmouseover

J'essaye de changer une image et le texte à l'intérieur d'un h2 en utilisant onmouseover et onmouseout , comme dans ce gif

Je donne quelques exemples ci-dessous où je peux changer l'image avec onmouseover et onmouseout en utilisant soit this code > ou document.getElementById , mais lorsque j'utilise this , je ne peux pas comprendre comment changer simultanément le texte à l'intérieur de la balise h2 (comme dans l'exemple sous document.getElementById ). L'utilisation de l'extrait de code suivant ne modifie pas l'image.

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

Je cherche un moyen d'utiliser this et de modifier à la fois l'image et le texte à l'intérieur le h2

Utilisation des données document.getElementById ^^/p>

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

Utilisation de this

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

javascript html onmouseover onmouseout

2 commentaires

Vous ne voulez certainement pas de getElementById . Lorsque le navigateur déclenche l'événement, il vous transmet un objet événement afin que vous n'ayez pas besoin de ceci non plus. fonction (événement) {var img = event.target; var h2 = img.previousSibling;} . Le problème avec cette méthode de récupération du H2 est qu'elle est brutale. Si votre structure de balisage change, elle échouera

@rayhatfield C'est dans l'exemple sous 'Utilisation de this '

3 Réponses :

1
votes

N'utilisez pas un IIFE dans l'attribut onclick , car ce n'est pas hérité par les fonctions (sauf si vous utilisez une fonction fléchée). Vous pouvez simplement mettre le code directement dans l'attribut onclick sans l'encapsuleur de fonction.

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

1
votes

Le mot-clé this seul ne vous mènera pas loin car il ne s'agit que d'une référence à l'élément qui a provoqué l'événement, c'est-à-dire l'élément dans votre cas.

Cependant, si l'élément

est toujours le frère suivant après votre , vous pouvez interroger la propriété .nextElementSibling de l'image pour obtenir une référence au et attribuer le texte.

Voici un exemple:

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

0 commentaires

0
votes

utilisez le sélecteur nextElementSibling pour l'afficher

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

0 commentaires