11521 sujets

JavaScript, DOM et API Web HTML5

Retour onclick

Bonjour
Je développe un petit code me permettra de zoomer sur une image.
Voici le code

<script language="javascript">

function agrandirimage()
{
document.getElementById("Agrandirimage").style.width = "500px";

}


</script>
<style>
	.agrandirimage{width: 200px;}
	#Agrandirimage:hover {border: 2px solid;cursor: zoom-in;}
</style>

<p><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_160x56dp.png" class="agrandirimage" id="Agrandirimage" name="image" onclick="agrandirimage()"> </p>


Seulement je souhaiterais revenir à la taille initiale de l'image en refaisant un onclick.
Est-ce faisable ?
Merci
Modifié par stephane72 (16 Jul 2019 - 12:09)
Modérateur
Et l'eau,

html:

<p><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_160x56dp.png" class="" id="Agrandirimage"> </p>


css:

.agrandirimage{transform: scale(1.25);}
    #Agrandirimage:hover {border: 2px solid;cursor: zoom-in;}


js :

window.addEventListener('DOMContentLoaded', ()=>{
        (()=>{
            let $image = document.getElementById('Agrandirimage');
            $image.addEventListener('click',()=>{
                $image.classList.toggle('agrandirimage');
            })
        })();
    });
Nikel Smiley smile Par contre je dois répété ce code sur plusieurs page de mon site comment je peux faire pour utiliser le toggle plusieurs fois ?
stephane72 a écrit :
Nikel Smiley smile Par contre je dois répété ce code sur plusieurs page de mon site comment je peux faire pour utiliser le toggle plusieurs fois ?


Pour cela il ne faut pas utiliser des ID mais des CLASS Smiley smile
C'est très différents avec les classes Smiley smile

Avec un ID c'est unique, donc tu récupère un noeud. Mais avec les classes tu récupère X noeud, donc une collection de noeud dom...

donc c'est un tableau à gérer et non un simple noeud. 

var classname = document.getElementsByClassName("classname");

var myFunction = function() {
  //...code...
};

for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', myFunction, false);
}
J'ai remplacé par une class mais onclick fonctionne plus !

<script language="javascript">

window.addEventListener('DOMContentLoaded', ()=>{
        (()=>{
            let $image = document.getElementByClass('Agrandirimage');
            $image.addEventListener('click',()=>{
                $image.classList.toggle('agrandirimage');
            })
        })();
    });

</script>
<style>
	
.agrandirimage{transform: scale(1.25);}
 .Agrandirimage:hover {border: 2px solid;cursor: zoom-in;}


</style>


<p><img class="Agrandirimage" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_160x56dp.png"> </p>
<p><img class="Agrandirimage" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_160x56dp.png"> </p>
Oui désolé j'avais pas vu ton poste.Je viens d'essayer de refaire un test mais je bloque encore

<script language="javascript">

var classname = document.getElementsByClassName("classname");

var agrandirimage = function() {
document.getElementByClass("Agrandirimage").style.width = "500px";
};

for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', agrandirimage, false);
}

</script>
<style>
	
.agrandirimage{transform: scale(1.25);}
 .Agrandirimage:hover {border: 2px solid;cursor: zoom-in;}


</style>


<p><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_160x56dp.png" class="Agrandirimage" name="image" onclick="agrandirimage()"> </p>

<p><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_160x56dp.png" class="Agrandirimage" name="image" onclick="agrandirimage()"> </p>
Mais... Mais... tu ne lis pas ? Smiley smile Smiley rasta

var classname = document.getElementsByClassName("classname");

tu n'a pas de classe qui se nomme "classname" toi... alors utilise ta vrai classe.

car dans la boucle avec le addeventlistener tu ajoute les trigger(les évenement automatique) aux elements portant la classe que tu as saisi. mais tu as saisi "classname"... donc forcément ça marche pas.

Tu saisi ta classe "Agrandirimage" au mauvais endroit.
Modifié par JENCAL (16 Jul 2019 - 16:21)
Sujet clos
Aller à