Changer le style d'un élément de childNodes

Résolu/Fermé
Totolego - 12 déc. 2021 à 15:06
 Totolego - 12 déc. 2021 à 19:03
Bonjour, J'ai problème dans mon code, quand j'appuie sur un bouton j'ajoute une photo et cette photo et les autres (qui était la avant) doivent changer de style. Pour cela j'utilise childNodes sauf qu'ils me disent que children n'est pas un objet.

voici une parti de mon code:

var children = branch.childNodes;
for (var i = 0; i < children.length; i++) {
var r = i * (360/children.length);
r = "rotate("+r+"deg)";
children[i].style.transform = r;
}


Merci.

Configuration: Macintosh / Safari 15.1
A voir également:

3 réponses

jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
12 déc. 2021 à 16:44
Bonjour,

Sans connaitre le code html qui va avec ce bout de code .. ni même le reste du js comme, à minima l'initialisation de ta variable branch .. difficile de te répondre.

Tu pourrais, pour commencer, faire dans ta boucle, un console.log de ta variable pour voir ce qu'elle contient
console.log(i,children[i]);

1
merci bien j'ai résolu le problème
0
Voici le code js,


var btn = document.getElementById("mid");
btn.addEventListener("click", addBranch);
function addBranch(){
var branch = document.getElementById("marqueur");
var image = document.createElement("img");
image.src = "branch.svg";
var p = getRandomInt(360);
p = "hue-rotate("+p+"deg)";
image.style.filter = p;
branch.appendChild(image);
var children = branch.childNodes;
for (var i = 0; i < children.length; i++) {
var r = i * (360/children.length);
r = "rotate("+r+"deg)";
children[i].style.transform = r;
}
}


et le code html:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Étoile</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<main>
<button id="mid"><p>Click to add branch</p></button>
<div id="marqueur">
<img id="nord" src="branch.svg">
<img id="est" src="branch.svg">
<img id="sudest" src="branch.svg">
<img id="sudouest" src="branch.svg">
<img id="ouest" src="branch.svg">
</div>
</main>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
0
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
12 déc. 2021 à 18:58
Tu ne nous as pas dit ce que donnait le console.log que je t'ai demandé de faire ?
Tu aurais vu que ça ne retournais pas ce que tu penses ...

Ce n'est pas childNodes que tu dois utiliser .. mais .children;
 var children = branch.children;
0