Discussion :

[infovect]

Bonjour à tous;
alors je vous explique je connais pas énormément le Javascript et je souhaiterai que lorsque l'on click sur une div class"A", la div de classe B" prend le Css de la class "C".

Voici le code :
HTML:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div class="A"></div>
<div class="B"></div>

CSS:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.A{
	width:50px;
	height:50px;
	background-color:#000000;
}
.B{
	width:100px;
	height:100px;
	background-color:#FF0004;
}
.C{
	width:150px;
	height:150px;
	background-color:#12FF00;
}

Et il faut faut obligatoirement des class et non des Id.

Merci beaucoup de votre aide !

[melka one]

jour

utilise document.GetElementsByclassName

[infovect]

Je n'ai pas compris ou je ne sais pas l'utiliser.
J'ai fait ça: https://jsfiddle.net/Lxdt0nyy/5/
Tu pourrais me le corriger stp ça serait sympa
Merci

[Bovino]

1. JavaScript est un peu plus binaire que les humains. Si tu fais des fautes d'orthographes en français, un humain arrive généralement à te comprendre, si tu fais des fautes d'orthographe en JavaScript, l'interpréteur ne comprend pas ce que tu veux dire, bref, GetElementsByclassName() != getElementsByClassName().

2. Quand tu utilises une fonction que tu ne connais pas, la première chose à faire est de se renseigner sur sa signature : la nature des paramètres attendus et ce qu'elle renvoie comme valeur.

[infovect]

Je suis de plus en plus perdu

Je dois changer quoi dans mon code parce que je l'ai fais avec les 2 écriture et les deux ne marchent pas.

Voici le code sur Fiddle ==> https://jsfiddle.net/Lxdt0nyy/6/

Merci

[Darkauron]

Bonjour,

Quand tu testes du JavaScript, tu as deux choix :
console.log(cequetuveux);
ou bien
alert(cequetuveux);

Dans ton cas, cequetuveux correspond au résultat de getElementsByClassName. Avant d'utiliser une fonction de manière totalement aléatoire, vérifie ce qu'elle te retourne (pour reprendre le conseil de Bovino).

Une fois que tu auras compris ce que tu récupère avec getElementsByClassName, tu pourras faire un code qui fonctionne correctement.

[Bovino]

Probablement parce que tu n'as pas tenu compte du deuxième point de mon précédent message.
D'autre part, que fait cette virgule après la déclaration de test2 ?

Aussi, pour commencer à déboguer en JavaScript, il faut ouvrir sa console d'erreur (F12 ou CTRL + MAJ + K selon le navigateur) et regarder les messages d'erreur.

[infovect]

Oui j'ai bien compris.

Alors j'ai réussit mais que avec des "id"

Comme voici ====> https://jsfiddle.net/Lxdt0nyy/7/

Mais j'aimerai qu'a la place des "id" ce sois des "class"

SVP j'ai besoin de votre aide ,
Il y a t'il quelqu'un d'emable pour me coriger mon code sur fiddle svp

[NoSmoking]

Bonjuor,
sur base de ce que tu as mis comme code

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div id="A"></div>
<div class="B"></div>

il te faut utilise la méthode document.querySelector.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var test = document.getElementById('A');
 
test.onclick = function(){
  var oElement = document.querySelector('.B');
  oElement.classList.toggle('C');
}

et si tu as plusieurs éléments avec la même classe

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="A"></div>
<div class="B"></div>
<div class="B"></div>

tu dois utiliser la méthode document.querySelectorAll

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
var test = document.getElementById('A');
 
test.onclick = function(){
  var oListElements = document.querySelectorAll('.B');
  // on boucle sur la liste des éléments retournés
  for( var i =0; i < oListElement.length; i++){
    oListElements[i].classList.toggle('C');
  }
}

à vérifier quand même la compatibilité navigateur que tu souhaites.

[infovect]

Merci merci merci merci merci !!!

C'est exactement ce qu'il me fallait c'est vraiment sympa !

[NoSmoking]

ceci dit tu avais toutes les billes pour y arriver avec la méthode getElementsByClassName(), comme il t'a été expliqué tout au long de cette discussion, et les conseils prodigués restent valables

[Bovino]

Le problème, quand on fourni un code prêt à copier / coller, c'est que celui qui l'utilise ne prend bien souvent même pas la peine d'essayer de le comprendre...
La preuve : http://www.developpez.net/forums/d15...s-meme-classe/.

[NoSmoking]

Je suis tout à fait d'accord avec toi car après avoir lu la réponse j'ai repris attentivement la discussion et me suis rendu compte que ma présentation des deux solutions risquait d'être prise pour argent contant sans plus de réflexion ...et... je me moinse, tiens il n'y a pas de smiley, car j'aurais du lire attentivement avant et non après.
donc , et bien mérités.

Le pire c'est que cela n'a servi à rien