[Résolu] Transformer html onclick"this.classList.toggle()" en fonction

hello...
Malgré les nombreuses lecture sur le sujet, je n'arrive pas a transformer un onclick qui est dans mon html en une fonction à appeler par onclick.

dans mon html:

<div class="tiler" onclick="this.classList.toggle('tiler-aveclick');">
<img/>
</div>

ATTENTION : ce n'est pas un onclick par #id mais par .class
j'ai cette ligne des dizaine de fois pour ouvrir des photos, je voudrais la transformer en fonction que j'appelle pour plus d'ergonomie.
PS : je suis une burne en js - j'aurais besoin de pédagogie - ceci est mon 1er post
Merci par avance...
Modifié par dbi (20 Feb 2019 - 10:27)

Mais ouiiiiiiiiiiii !!!
merciiii c'est exactement ça.

On me glisse dans l'oreillette que si tu veux etre à la pointe du Js il faudrait écrire :

const testElements = [...document.getElementsByClassName('test')];

function faisdestrucs() {
  this.classList.toggle('red');    
}

testElements.forEach(e => e.addEventListener('click', faisdestrucs));

https://jsfiddle.net/undless/xs98pnob/32/

(c'est pareil mais avec les "belles" syntaxes ES6)

Bonne journée !
Modifié par _laurent (20 Feb 2019 - 15:10)

On me glisse dans l'oreillette que si tu veux être à la pointe du Js, tu vas laisser du monde au bord de la route

kustolovic a écrit :
On me glisse dans l'oreillette que si tu veux être à la pointe du Js, tu vas laisser du monde au bord de la route

Ah ? Comment ça ?

Pour les 10% d'utilisateurs qui ne supportent pas les fonctions fléchées, qui auront pour effet de désactiver tout le javascript du site.

donc pour etre sur de bien comprendre, si je formule comme cela est-ce juste ?
les solutions N°1 et N°2 de _laurent sont bonnes, mais la 2 est plus "moderne" au risque de ne pas convenir a tous les utilisateurs ?

Apparemment ca touche très peu d'utilisateurs...
j'y go ou j'y go pas les gars ???
je m'en remet a vous... moi je suis une

dbi a écrit :
Apparemment ca touche très peu d'utilisateurs...
j'y go ou j'y go pas les gars ???

Bah c'est ce que j'ai vu mais bon ca reste quand meme plus que la première solution.

Du coup je te dirais de garder la première (perso c'est comme ca aussi que je l'aurais fait) pour etre sur de ne pas te conseiller quelque chose de trop avancé et inadapté a un site grand public. Le reste c'était pour la postérité (et moi j'ai appris des nouvelles choses en plus).
Le tout c'est que ca marche

dbi a écrit :
donc pour etre sur de bien comprendre, si je formule comme cela est-ce juste ?
les solutions N°1 et N°2 de _laurent sont bonnes, mais la 2 est plus "moderne" au risque de ne pas convenir a tous les utilisateurs ?

C'est exactement cela. Le très peu, additionné, fait environ 10% des utilisateurs, ce n'est pas rien. À mon sens il faut de meilleures raisons que «c'est plus beau» ou «c'est moderne» pour utiliser ces nouveautés (qu'elles apportent une réelle plus value), plutôt que demander au gens de se payer un nouveau téléphone ou pc etc.

precis !
merci les gars bon code a vous et pitetre a bientot...

Bonjour,

Le "for ... of" de la première solution lui aussi ne marche pas partout !

Amicalement,

parsimonhi a écrit :
Bonjour,

Le "for ... of" de la première solution lui aussi ne marche pas partout !

Amicalement,

merci pour l'info

<script> // onclick rajouter "tiler-aveclick" a la class "tiler"
var selectionClass = document.getElementsByClassName('fermer-aveclick');

function ajouteClass(elem) {
  elem.classList.toggle('icon_menu-aveclick');    
}

for(let elementClick of selectionClass) {
		elementClick.addEventListener("click", function(){ ajouteClass(elementClick); });
};
</script>

Pour aller plus loin dans le sujet....
est ce que je peux modifier au clic une autre class et non pas celle de l'élément qui a cliqué ?
Je voudrais utiliser le toggle sur la balise qui a la classe "icon_menu-aveclick".

si qq'un sait comment faire
Merci
Modifié par dbi (26 Feb 2019 - 22:43)

Salut,

Tu as tout ce qu'il faut normalement.
Quelle est la structure de ton html ? Je veux dire il est ou ton élément icon_menu-aveclick il n'y en a qu'un par page qui doit toggle a n'importe quel clic ou un par élément cliquable qui y est "relié" ?

Hello _laurent,
merci pour ton aide (a nouveau

voici mon html, c'est un menu pour les telephones.
Quand je click sur contact (en dernier qui a une class"fermer_nav2") j'aimerais que la class"icon_menu" soit celle sur laquelle le toogle agisse...

	<a href="javascript:void(0)" class="icon_menu" >
			<nav class="nav_1">
						menu<br>
				<i class="icon carre-menu"></i>
			</nav>
		        </a>	
		
			<nav class="nav_2" 
						data-aos="fade-down"
						data-aos-offset="25"
						data-aos-duration="500"
						data-aos-easing="ease-in-out"
						data-aos-anchor="#page_1-2"
						data-aos-once="false">
						
			<a href="index.html#page_1-1">
				<div class="nav_2-1">
					<i class="icon icon-accueil">&nbsp;</i>
					ACCUEIL
				</div>
			</a>
			<br>
			<a href="presentation-v2.html">
				<div class="nav_2-1">
					<i class="icon icon-presentation">&nbsp;</i>
					PRESENTATION
				</div>
			</a>
			<br>
			<a href="index.html#page_2-1">
				<div class="nav_2-1">
					<i class="icon icon-realisation">&nbsp;</i>
					REALISATION
				</div>
			</a>
			<br>
			<a href="photos_page1.html">
				<div class="nav_2-1">
					<i class="icon icon-realisation">&nbsp;</i>
					PHOTOS
				</div>
			</a>
			<br>
			<a href="index.html#section9" class="fermer_nav2">
				<div class="nav_2-1">
					<i class="icon icon-contact">&nbsp;</i>
					CONTACT
				</div>
			</a>
			<br>
		</nav>	

Aprés de maniere plus generale c'est un fonction que je cherche depuis longtemps.
on clic sur un lien A, et cela ajoute (ou enleve... le toogle) a la class d'un lien B.

Et bien il faut juste que tu aille sélectionner comme on a fait pour l'élément "fermer-aveclick" :

var iconmenu = document.getElementsByClassName('icon_menu')[0];

et appliquer ce que tu veux dessus au moment ou tu veux que ça arrive.

iconmenu.classList.toggle('laclassequetuveux');

Je dirais dans al fonction "ajouteClass" avec l'autre toggle. Et du coup tu peux renommer un peu la fonction "ajouteClass" pour qu'on comprenne mieux ce qui se passe dedans par exemple "menuSelection" ou autre chose (pas obligé mais c'est une bonne pratique pour la maintenabilité du code).

Après ici tu n'a qu'un seul élément donc tu pourrais même mettre un id unique sur ta balise HTML et passer par getElementById plutot que par getElementsByClassName (getElementsByClassName va chercher TOUTES les occurrences de cette classe et renvoi un tableau c'est pour ça qu'on est obligé de rajouter [0] à la fin pour avoir le premier, et seul, élément).
Modifié par _laurent (27 Feb 2019 - 11:03)

Ca va un peu vite pour moi...
Je ferais mes test dés que je m'y remet voir si je me dépatouille avec ca ...
Mais si je comprends bien, sans le [0] ça fera la même chose à toutes les class qui s'appelle 'fermer-aveclick'

et si je vise precisement le 3eme 'fermer-aveclick' de mon html je met [2] ?
c'est ca ?