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

Version imprimable

1 pièce(s) jointe(s)

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:

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:

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:

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 :

Pièce jointe 421925

Merci

24/10/2018, 21h35
badaze

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.
24/10/2018, 22h04
lockmanz
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:

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.

Je me répète.

Code:

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:

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:

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

24/10/2018, 23h49
badaze
Une autre chose.

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

1 2 var div = document.body.firstChild.nextSibling.nextSibling.nextSibling;
Il vaudrait mieux travailler directement avec l'id du div.
Code:

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.

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:

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)";
	}    
}

25/10/2018, 11h49
Invité
Bonjour,

C'est une question de logique.

Il faut mettre
- if / else if / else if / else if
Ou :
- switch / case

Bonjour merci pour la réponse, je suis d'accord sur l'indentation par contre ce que je ne comprend pas c'est que ma première fonction javascript fonctionne par contre la seconde non et le soucis vient de la condition je ne sais pas pourquoi...

Code:

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
27
28
29
30
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");
	var el = div.style.backgroundImage;
	switch (el) {
		case 'url(images/image0.png)':
			div.style.backgroundImage = "url(images/image1.png)";
			break;
		case 'url(images/image1.png)':
			div.style.backgroundImage = "url(images/image2.png)";
			break;
		case 'url(images/image2.png)':
			div.style.backgroundImage = "url(images/image3.png)";   
			break;
		case 'url(images/image3.png)':
			div.style.backgroundImage = "url(images/image1.png)";
			break;
}
 
}

OK.

Attention à la syntaxe.

div.style.backgroundImage va renvoyer : url("xxxxxx/xxxxx.png") avec des double-quotes (")
de plus, il te manque une condition "par défaut" ( default: )

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
"use strict";
function changer_background_image_survol_div() {
  var div = document.getElementById("div1");
  var el = div.style.backgroundImage;
  switch (el) {
    case 'url("images/image0.png")':
      div.style.backgroundImage = 'url("images/image1.png")';
      break;
    case 'url("images/image1.png")':
      div.style.backgroundImage = 'url("images/image2.png")';
      break;
    case 'url("images/image2.png")':
      div.style.backgroundImage = 'url("images/image3.png")';
      break;
    case 'url("images/image3.png")':
      div.style.backgroundImage = 'url("images/image1.png")';
      break;
    default:
      div.style.backgroundImage = 'url("images/image0.png")';
  }
}

Voici une autre façon de s'y prendre.

1- On ajoute un attribut data-** au div :

Code:

<div id="div1" onmouseover="changer_background_image_survol_div();" data-bgimg="0">coucou !</div>

2- le CSS initial :

Code:

1
2
3
4
#div1 {
  background-color:yellow;
  background-image:url(images/image0.png);
}

3- On utilise cet attribut data-** pour identifier l'image :

Code:

1
2
3
4
5
6
7
8
9
"use strict";
function changer_background_image_survol_div() {
  var div = document.getElementById("div1");
  var nbre_images = 4; // nombre d'images au total
  var el = Number(div.dataset.bgimg);
  div.dataset.bgimg = (el+1)%nbre_images; // x%y : on utilise le MODULO (reste de la division de x par y)
  console.log(div.dataset.bgimg);
  div.style.backgroundImage = "url(images/image"+(el+1)%nbre_images+".png)"; // les images sont : image0.png, image1.png,... image4.png (de 0 à 3 : 4 images)
}

4- Quant au changement de couleur :

Code:

1
2
3
4
5
6
7
8
9
"use strict";
function changer_background_couleur_div() {
  var div = document.getElementById("div1");
  if (div.style.backgroundColor == "white") {
    div.style.backgroundColor = "yellow";  
  } else {
    div.style.backgroundColor = "white";
  }
}

Remarque : "use strict"; est à mettre au début du script, une fois pour toutes :

Code:

1
2
3
4
5
<script>
"use strict";
function  { ...}
function  { ...}
</script>

25/10/2018, 18h34
lockmanz

Jreaux62 Je vous remercie beaucoup d'avoir donné de votre temps vous avez réussi à résoudre mon problème principalement du à la syntaxe : 'url("images/image1.png")'.