Indication JS

Fermé
Little_devv Messages postés 4 Date d'inscription lundi 4 avril 2022 Statut Membre Dernière intervention 5 avril 2022 - Modifié le 4 avril 2022 à 16:56
Little_devv Messages postés 4 Date d'inscription lundi 4 avril 2022 Statut Membre Dernière intervention 5 avril 2022 - 5 avril 2022 à 14:50
Bonjour, cher développeur


Je bloque sur un exercice que j'ai accompli a 80%, le but de l'exercice est de pouvoir zoom et unzzom sur une image dans mon cas c'est un soleil, j'ai réussi a définir les fonctions (voir le code), le truc sur lequel je bloque c'est qu'il faut créer une fonction eclipse, quand on clique sur le soleil, il faut que l'image change à l'aide de la fonction que j'ai définis StartEclipse et EndEclipse , le problème c'est quand je clique pour que l'image change j'ai ce problème .





Voci le code JS:
const STEP=10
const UPPER_BOUNd= 500;
const LOWER_BOUND=200;
// mise en place des événements
// 3 donction, zoom, unzoom, debutéclipse, fin eclipse

var setupListeners= function(){
var plus= document.getElementById("plus");
plus.addEventListener("click", zoom);
var moins= document.getElementById("moins");
moins.addEventListener("click", unzoom);

var s = document .getElementById("sun");
s.addEventListener("click",startEclipse);
}

window.addEventListener("load", setupListeners);
function zoom(){
    var myImg = document.getElementById("sun");
    var computed= window.getComputedStyle(myImg);
    var width= parseInt(computed.width);
    if (width == 500) {
        alert("Maximum");
    } else {
        myImg.style.width = (width + 20) + "px";
    }
}
    function unzoom(){
    var myImg = document.getElementById("sun");
    var computed= window.getComputedStyle(myImg);
    var width= parseInt(computed.width);
    if (width == 20) {
        alert("Minimum");
    } else {
        myImg.style.width = (width - 20) + "px";
    }
}



var startEclipse = function(event){
  var soleil= document.getElementById("sun");
  soleil.src="images/eclipse.jpg";
  soleil.removeEventListener("click", startEclipse);
  soleil.addEventListener("click", endeclipse);

  }
  var endeclipse= function(){
        this.src="images/soleil.jpg";
        this.removeEventListener("click",endEclipse);
        this.addEventListener("click", startEclipse);
  }

window.addEventListener("load", setupListeners);


EDIT : Ajout des balises de code.


Merci de votre aide.


Configuration: Macintosh / Safari 15.3

5 réponses

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
4 avril 2022 à 16:59
Bonjour,

A l'avenir, merci d'utiliser les balises de code pour poster ton code sur le forum ( j'ai édité ton message pour les mettre).
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Ensuite, le problème.. c'est sûrement que le chemin donné vers l'image n'est pas le bon...

Peux tu examiner l'image ( via les outils de debug de ton navigateur) et regarder le lien de l'image qui s'y trouve ?
Peux tu entrer ce chemin dans ton navigateur et nous dire si il trouve bien l'image ?

NB: nous donner le code HTML qui va avec ton JS serait surement utile également...



0
Little_devv Messages postés 4 Date d'inscription lundi 4 avril 2022 Statut Membre Dernière intervention 5 avril 2022
4 avril 2022 à 17:35
Bonjour,

Merci d'avoir pris le temps de répondre,

Pour le chemin Les images sont toutes dans un dossier unique et j'ai bien précisé l'emplacement !

J'ai d'examiner l'image et quand j'execute sur la console ceci
soleil.src="images/eclipse.jpg";
il me renvoie une erreur !

Voici le code Html:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" >


<head>

	<title>eclipse</title>
	<meta charset="UTF-8"/>

	<link href="style/style-exo5.css" type="text/css" rel="stylesheet" />

	<script src="scripts/scri.js"></script>

</head>

<!-- corps du document -->
<body>
	<h1>premiers événements : eclipse</h1>

	<div id="doc">
	  <div id="buttons">
	    <button id="plus">+</button>
	    <button id="moins">-</button>
	  </div>
	  <img id="sun" src="../images/soleil.jpg" alt="soleil" />
		

	</div>

</body>

</html>
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
4 avril 2022 à 19:36
Regarde la ligne 26 de ton code HTML...
Tu devrais y remarqué la présence des deux points qui se trouvent devant le chemin..
Si tu compares avec ton code JavaScript, tu remarqueras qu'ils n'y sont pas..

Tu n'as donc pas mis le bon chemin dans ton JavaScript
0
Little_devv Messages postés 4 Date d'inscription lundi 4 avril 2022 Statut Membre Dernière intervention 5 avril 2022
4 avril 2022 à 23:52
Bonsoir

J'ai corrigé les .. pour le chemins, mais quand j'execute la fonction StartEclipse, le soleil disparait.

Normalement l'eclipse devrait apparaitre !


Merci
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
5 avril 2022 à 06:29
Tu n'as pas de message dans la console ?
Si tu examines l'image tu as le bon chemin ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Little_devv Messages postés 4 Date d'inscription lundi 4 avril 2022 Statut Membre Dernière intervention 5 avril 2022
5 avril 2022 à 14:50
Bonjour,

j'ai trouvé, il manquait juste un / avant les ..

Merci pour ton aide!!
0