[Résolu] Probleme avec getElementsByClassName

Bonjour,

je ne comprend pas pourquoi getElementsByClassName ne récupère pas toute les class et fait les modification voulu en fonction du click

Le html :

  <div class="NewTODO">
    <div class="CheckBox"></div>
    <p class="NameToDo">Type New Todo</p>
  </div>

  <div class="Content">
    <div class="NewTODO">
      <div class="CheckBox"></div>
      <p class="NameToDo">Complete online JavaScrip course</p>
    </div>
    <div class="NewTODO">
      <div class="CheckBox"></div>
      <p class="NameToDo">Jag around the park 3k</p>
    </div>
    <div class="NewTODO">
      <div class="CheckBox"></div>
      <p class="NameToDo">10 minutes meditation</p>
    </div>
    <div class="NewTODO">
      <div class="CheckBox"></div>
      <p class="NameToDo">Read for 1 hour</p>
    </div>
    <div class="NewTODO">
      <div class="CheckBox"></div>
      <p class="NameToDo">Pick up groceries</p>
    </div>
    <div class="NewTODO">
      <div class="CheckBox"></div>
      <p class="NameToDo">Complete all the Todo</p>
    </div>
  </div>

Le css :

.NewTODO {
    display: flex;
    align-items: center;
    margin-bottom: 50px;
    padding: 15px;
    border-radius: 10px;
    background-color: hsl(235, 24%, 19%);
}

.NewTODO p {
    margin-left: 15px;
}

.CheckBox {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #555;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    cursor: pointer;
}

.Content {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
}

.Content .NewTODO {
    margin: 0;
    border-radius: 0;
}

.Content .NewTODO:first-child {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.Content .NewTODO:last-child {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

Le JavaScript :

var CheckBox = document.getElementsByClassName("CheckBox");
var n = 0
var NameToDo = document.getElementsByClassName("NameToDo")

CheckBox.addEventListener("click", () => {
    if (n % 2 === 0) {
        CheckBox.style.background = "linear-gradient(hsl(192, 100%, 67%), hsl(280, 87%, 65%))";
        CheckBox.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="11" height="9"><path fill="none" stroke="#FFF" stroke-width="2" d="M1 4.304L3.696 7l6-6"/></svg>';
        NameToDo.style.textDecoration = "line-through"
        NameToDo.style.color = "#999"
        n ++;
    }
    else {
        CheckBox.style.background = "";
        CheckBox.innerHTML = '';
        NameToDo.style.textDecoration = ""
        NameToDo.style.color = "#F1F1F1"
        n ++;
    };
});

cordialement

Bonjour,

Cette fonction récupère bien toutes les classes et les garde en mémoire... dans un tableau. Pour s'en servir par la suite il faut donc parcourir la variable - et donc les données sous forme de tableau - au moyen d'une boucle.

Par exemple :

const maFonction = (() => {
  document.getElementsByClassName('une-classe').forEach(el => {
    el.addEventListener('click', () => {
      // un truc à faire...
    })
  })
})()

Modifié par Olivier C (29 Jun 2022 - 20:59)

Hello,

Fox68 a écrit :
Bonjour,

je ne comprend pas pourquoi getElementsByClassName ne récupère pas toute les class

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

console.log(CheckBox); 
// ou
debugger;

et non, tu n'as pas pdb, mais tu as ... par contre,le navigateur qui t'aide à déboguer avec des fonctionnalités bien pratiques (le mode débogage dans un Webkit ou Gecko). Et puis (comme je te l'ai mentionné ci dessus) debugger. Une instruction qui est un peu l'équivalent de pdb. pdb n'existe pas en js et il n'y a pas d'équivalent à ce que je sache. C'est bien embêtant lorsque tu fais du nodeJS. Tu n'as que : console

Fox68 a écrit :
D'accord c'est un petit peut comme une liste python

merci beaucoup bonne fin d'après midi

Oui c'est un peu ça. Ce que tu vas récupérer, c'est un nodeList. Pour parser aisément, tu peux utiliser forEach ou for(let i ....; ...; ...) ou while. Je te laisse voir ça sur la mdn de quoi il en retourne.

Bien que le JS soit un langage à typage faible, pour le coup si tu souhaites convertir un nodeList en Array (l'équivalent d'une list en python), tu devras faire ceci :

let $els = Array.from(document.getElementsByClassName('une-class'));

Ce qui te donnera plus de possibilités pour parser ton array (ouais je sais, en JS, c'est la foire au bordel) :
for/of
forEach
for(let i ...; ...; ...)
for/in (ce type de boucle étant plus utilisé pour des objets scalaires/statiques (un peu l'équivalent des dictionnaires en Python avec la méthode dict.items):
js :

let un_objet = {
  'une clef': 'une valeur',
  'une autre clef': 'une autre valeur'
};
for(item in un_objet){
  console.log('clef =>', item);
  console.log('valeur =>', un_objet[item]);
};

en Python :

un_objet = {
  'une clef': 'une valeur',
  'une autre clef': 'une autre valeur'
}
for key, value in un_objet.items():
  print('clef =>', key)
  print('valeur =>', value)

Personnellement, j'utilise forEach. Mais ce n'est qu'une question de style.
Modifié par niuxe (27 Jun 2022 - 00:01)