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

Résolu
Totolego -  
 Totolego -
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

Réponse 1 / 3
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
Totolego
 
merci bien j'ai résolu le problème
0
Réponse 2 / 3
Totolego
 
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
Réponse 3 / 3
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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