Image qui s'agrandit au click Fermé

Question

Bonjour a tous je vous explique mon problème: Je créer un site Web; j'ai deux image affiché côte à côte (display: flex). Je veux que lorsque je click sur une des deux images, l'autre disparaisse, et l'image du click s'agrandisse. Voilà la section du code html correspondant:

-------------------------------------------------------------------------------------------------- Voilà le code CSS correspondant : .image-presentation { margin: 5px; } #imageagrandir { width: 50%; display: block; } #imageagrandir2 { width: 50%; display: block; } -------------------------------------------------------------------------------------------------- Voilà le code JS : var image = document.getElementById('imageagrandir'); var imageDeux = document.getElementById('imageagrandir2'); image.addEventListener('click', function() { if (image.style.width == "50%" ) { image.style.width = "100%"; imageDeux.style.display = "none"; } else image.style.width = "50%"; imageDeux.style.display = "block"; }); image2.addEventListener('click', function() { if (image2.style.width == "50%" ) { image2.style.width = "100%"; image.style.display = "none"; } else image2.style.width = "50%"; image.style.display = "block"; }); N'ayant que quelques base en JS, vous comprendrez pourquoi je n'ai pas fait de fonction (ce qui aurait été plus simple je pense), car je ne sais pas en faire ... Je pense aussi que ma technique employé est assez mauvaise, car je joue que avec le CSS... Merci d'essayer de la faire de cette façon si possible, et de bien vouloir m'expliquer ce que vous faites :) Merci par avance :)

Soloc · Answer

Bonjour,
en testant votre code vous devez mettre la console(outils de développement accessible par les menus du navigateur, onglet console). Elle permet d'afficher les erreurs et vous verrez vite d'où vient votre erreur.

Un indice, vérifiez vos noms de variables.
Et la console avec débogage est un outil indispensable pour pas perdre de temps à relire votre code.

Des fonctions vous en utilisez:

image2.addEventListener('click', function() {

if (image2.style.width == "50%" ) {

image2.style.width = "100%";
image.style.display = "none";

} else

image2.style.width = "50%";
image.style.display = "block";

});
/*
addeventListener et une fonction (du langage, pré-faite pour faire simple)qui prends entre parenthèse une autre fonction dite anonyme puisqu'il ne lui a pas été donné de nom(ce qui peut servir pour certains emplois mais ne permet pas de la réutiliser):*/
function(){
//if(image
//....
}

// structure d'une function en JavaScript

function nomDeLaFunction( "ici paramètre/s facultatif et illimités" ){
//-- corps de la fonction, en gros ce qu'elle doit faire et l'utilisation des paramètres éventuels

}//-- la dernière accolade indique la fin de la fonction
//-- Et comme vu dans votre script on peut imbriquer les fonctions les unes dans les autres,
//-- il y a cependant des règles dont il faut tenir compte comme "la durée de vie" de chaque fonction
//-- en effet une fonction une fois lue et résolue n'existe plus et son contenu et ce qui s'y passe n'est //-- pas accessible directement(il y a un moyen de contourner cette restriction) à l'extérieur de celle ci
//-- Vous savez tout ou presque sur les fonctions,
//--- bien qu'il existe bien des manières d'écrire les fonctions et les objets(un autre concept 
//-- important dans l'organisation du programme)
 

"Je pense aussi que ma technique employé est assez mauvaise, car je joue que avec le CSS... "
D'un autre côté tant que ça marche mais essentiellement JavaScript est là pour manipuler la page : HTML et CSS(le DOM) surtout, le reste ce sont des "facilités" de la programmation (variables, tests/conditions et autres structures logiques).

https://www.alsacreations.com/astuce/lire/1436-console-javascript.html

Image qui s'agrandit au click

1 réponse

Discussions similaires