11521 sujets

JavaScript, DOM et API Web HTML5

Recuperer deux class ou deux id avec document.querySelector

bonjour
j'ai un javascript avec une fontion pause au survol de la souris
var stop = document.querySelector("#boite");
ca marche tres bien sur monimage.gif mais je voudrais avoir cette pause au survol de mon image.gif et de stop.gif
j'ai essaye de bidouiller des trucs de ce genre
var stop = document.querySelectorAll("#boite, .souris");
mais ca ne fontionne pas

comment recuperer avec queryselector id=#boite et l'image qui se trouve dans l'autre div qui suit?
en vous remerciant

j'ai en code html
<div id="boite" style="width:290px;height:150px">
<div id="image">
<img id="monimage" src="monimage.gif"></div></div>
<div class="texte"><a href="#" title="Pause animation"><img class="souris" src="stop.gif" alt="Pause animation"></a> mon texte</div>

en css
#boite {
    display: table
}

#image {
    display: table-cell;
    vertical-align: middle;
    text-align: center
}

Modifié par pouemes (27 Sep 2016 - 15:25)
Modérateur
Salut,

J'ai pas très très bien compris ce que tu veux faire.
Il nous manque également la partie Js (la plus interessante pour voir comment tu récupère et comment tu traite ton résultat).
Sinon au passage je suspecte que tu utilise querySelectorAll comme querySelector alors que querySelector renvoie un élément alors que querySelectorAll renvoie une liste d'élément (et du coup il faut y accéder en faisant un stop).
bonjour laurent

voila le javascript


var wdmax = 290;
var hdmax = 145;
var ImAgE = "monimagealendroit.gif";
var MiRoIr = "monimage.gif";
var wdmin = 0;
var hdmin = 0;
var inc = 5;
var vIt = 50;
var poI = 7000;
var poM = 4000;
var PoE = "PoS";

function InVeRsE() {
    "use strict";
    if (window.Am) {
        setTimeout(InVeRsE, 1);
        return
    }
    if (PoE === "PoS") {
        var wd = document.querySelector("#monimage").width;
        wd = wd - inc;
        document.querySelector("#monimage").width = wd;
        if (wd === wdmin) {
            document.querySelector("#monimage").src = ImAgE;
            inc = -inc
        }
        if (wd === wdmax) {
            PoE = "pOe";
            inc = -inc;
            setTimeout(InVeRsE, poI)
        } else {
            setTimeout(InVeRsE, vIt)
        }
    } else {
        var hd = document.querySelector("#monimage").height;
        hd = hd - inc;
        document.querySelector("#monimage").height = hd;
        if (hd === hdmin) {
            document.querySelector("#monimage").src = MiRoIr;
            inc = -inc
        }
        if (hd === hdmax) {
            PoE = "PoS";
            inc = -inc;
            setTimeout(InVeRsE, poM)
        } else {
            setTimeout(InVeRsE, vIt)
        }
    }
}
document.addEventListener("DOMContentLoaded", function() {
    "use strict";
    var Dstop = document.querySelector("#boite");
    Dstop.addEventListener("mouseenter", function() {
        window.Am = 1
    });
    Dstop.addEventListener("mouseleave", function() {
        window.Am = 0
    })
    var Mstop = document.querySelector(".souris");
    Mstop.addEventListener("mouseenter", function() {
        window.Am = 1
    });
    Mstop.addEventListener("mouseleave", function() {
        window.Am = 0
    })
});
window.addEventListener("load", setTimeout(InVeRsE, 3000));



ma question c'est puis je recuperer #boite et .souris sur une seule variable style
var Mstop = document.querySelector("#boite, .souris");
au lieu de doubler mon code avec Dstop et Mstop
simplifier mon code quoi
merci
oui tu peux le simplifier comme te la précisé (pour rire Smiley langue ) _laurent :


var elements = document.querySelectorAll("#boite, .souris");
for (var j = 0; j < elements.length; j++) {
  elements[j].addEventListener("mouseenter", function() {
        window.Am = 1
    });

elements[j].addEventListener("mouseleave", function() {
        window.Am = 0
    });
}

Modifié par JENCAL (27 Sep 2016 - 17:05)
à priori ca marche
mais j'ai le message d'erreur suivant dans dreamweaver
dont make function with a loop
faudrait faire quoi?
merci
jslint préfére de base que tu utilise forEach, mais tu peux cocher l'option pour le "for" et ne plus avoir ce warning
Modifié par JENCAL (28 Sep 2016 - 12:09)
visiblement deja faut rajouter
var j;

comme ceci
var j;
for (j = 0; j < elements.length; j++)

sinon jslint ne finit pas

et sans doute le ; au bout de window.Am = 1;

sinon justement j'ai trouve ceci sur w3scholols.com vu dou ca vient ca doit etre bon et jslint donne les meme erreur
function myFunction() {
var x = document.querySelectorAll("div > p");
var i;
for (i = 0; i < x.length; i++) {
x.style.backgroundColor = "red";
}
}
Sujet clos
Aller à