JavaScript ne récupère pas le chemin d'une image

**lockmanz** · 24/10/2018, 20h51

Bonsoir,

Dans ce programme mon but est d'alterner les images or ma fonction div.style.backgroundImage.name === "url(images/image0.png)" ne fonctionne pas !

Voici l'ensemble de mes codes :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="fr">
   <head>
 
      <link rel="stylesheet" href="style.css" />   
      <title>DOM6</title>
      <script src="scripts.js"></script>
   </head>
   <body>
 
	  <button type="button" onClick="changer_couleur_div()">changer de couleur !</button>
      <div id="div1" onmouseover="changer_couleur_survol_div()"></div>
   </body>
</html>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#div1
{
	height:20cm;
	margin-left:25%;
	margin-right:25%;
	background-color:white;
	background-image:url(images/image0.png);
	background-size:30%;
}
 
body 
{
	background-color:gray;
}
 
button
{
 
	width:20%;
	height:13%;
	margin-left:40%;
}

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function changer_couleur_div() {
    "use strict";
    var div = document.body.firstChild.nextSibling.nextSibling.nextSibling;
    if (div.style.background === "white") {
        div.style.background = "yellow";  
    } else {
        div.style.background = "white";
    }
}
 
function changer_couleur_survol_div() {
    "use strict";
    var div = document.body.firstChild.nextSibling.nextSibling.nextSibling;
	if (div.style.backgroundImage.name === "url(images/image0.png)") {
		div.style.backgroundImage = "url(images/image1.png)";
	}
	if (div.style.backgroundImage === "url(images/image1.png)") {
		div.style.backgroundImage = "url(images/image2.png)";
	}
	if (div.style.backgroundImage === "url(images/image2.png)") {
		div.style.backgroundImage = "url(images/image3.png)";
	}	
	if (div.style.backgroundImage === "url(images/image3.png)") {
		div.style.backgroundImage = "url(images/image0.png)";
	}    
}

Mon dossier ressemble à ceci :

Nom : Captureok.PNG
Affichages : 434
Taille : 98,2 Ko

Merci

**badaze** · 24/10/2018, 21h35

1 - Il me semble que c’est backgroundColor et non pas background.
2 - Tu écris backgroundImage et aussi backgroundImage.name. Tu ne trouves pas que quelque chose ne va pas ?
Après il se peut qu’il y ait d’autres erreurs qui feront que les corrections ne rendront pas le code fonctionnel.

**lockmanz** · 24/10/2018, 22h04

Merci pour votre réponse, mais dans mon cas il s'agit de modifier l'image en background de mon div je dois donc utiliser backgroundImage.
Ce que je n'arrive pas c'est ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
if (div.style.background === "url(images/image1.png)") {
		div.style.backgroundImage = "url(images/image2.png)";
	}

le soucis vient de la condition dans le if je veux que si l'image1 est en fond d'écran le fond d'écran aura alors pour image l'image2.

**badaze** · 24/10/2018, 22h19

Je me répète.

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
function changer_couleur_div() {
    "use strict";
    var div = document.body.firstChild.nextSibling.nextSibling.nextSibling;
    if (div.style.background === "white") {  <= div.style.backgroundColor
        div.style.background = "yellow";   <= idem
    } else {
        div.style.background = "white"; <= idem
    }
}

Tu mets .name et juste en dessous tu ne le mets pas. Il ne faut pas mettre le .name

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 if (div.style.backgroundImage.name === "url(images/image0.png)") {
		div.style.backgroundImage = "url(images/image1.png)";
	}

Il n'y a rien qui t'interpelle dans ce que tu as écrit ? En informatique il faut être rigoureux.

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
if (div.style.background === "url(images/image1.png)") {
		div.style.backgroundImage = "url(images/image2.png)";
	}

**badaze** · 24/10/2018, 23h49

Une autre chose.

Avec ton code suivant plus rien ne fonctionnera si tu ajoutes un élément html avant le div !

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var div = document.body.firstChild.nextSibling.nextSibling.nextSibling;

Il vaudrait mieux travailler directement avec l'id du div.

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var div = document.getElementById('div1');

Au final. L'adressage relatif (document.body.firstChild.nextSibling.nextSibling.nextSibling) peut des fois être très utile mais il faut bien maîtriser son sujet sachant que dans 99% des cas l'adressage absolu (document.getElementById('div1')) suffit.

**lockmanz** · 25/10/2018, 11h41

j'ai utilisé var div = document.body.firstChild.nextSibling.nextSibling.nextSibling; puisque c'est l'énoncé qui me l'oblige. (En fait je n'est pas assez clair c'est la fonction changer_couleur_survol_div() qui ne fonctionne pas)

Voici de nouveau mon code modifié (la première fonction est correct la deuxième a un soucis au niveau du if) :
JAVASCRIPT modifié

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function changer_couleur_div() {
    "use strict";
    var div = document.getElementById("div1");
    if (div.style.background === "white") {
        div.style.background = "yellow";  
    } else {
        div.style.background = "white";
    }
}
 
function changer_couleur_survol_div() {
    "use strict";
    var div = document.getElementById("div1");
	if (div.style.backgroundImage === "url(images/image0.png)") {
		div.style.backgroundImage = "url(images/image1.png)";
	}
	if (div.style.backgroundImage === "url(images/image1.png)") {
		div.style.backgroundImage = "url(images/image2.png)";
	}
	if (div.style.backgroundImage === "url(images/image2.png)") {
		div.style.backgroundImage = "url(images/image3.png)";
	}	
	if (div.style.backgroundImage === "url(images/image3.png)") {
		div.style.backgroundImage = "url(images/image0.png)";
	}    
}

JavaScript ne récupère pas le chemin d'une image

JavaScript

Vue hybride

Discussions similaires

Partager

Partager