Bonjour, voilà j'ai un petit soucis en javascript !
Je dois réalisé un arbre de tournoi (c'est pas mon choix, c'est un TP ...) pour des jeux.
Voici déjà un aperçus en HTML/CSS.
Mon problème, c'est que lorsque je clic sur "Winner", j'arrive bel et bien à modifié la classe du parent pour lui ajouter ".win" et supprimer le bouton "winner". Mais j'aimerais aussi modifié la couleur de la fléche du haut pour lui aussi lui attribuer la classe ".win" qui vas changer la couleur.
Cependant, dans le javascript, je n'arrive pas dans la var "test" à l'afficher. J'ai un message du type :
Je dois réalisé un arbre de tournoi (c'est pas mon choix, c'est un TP ...) pour des jeux.
Voici déjà un aperçus en HTML/CSS.
You must be registered for see images attach
Mon problème, c'est que lorsque je clic sur "Winner", j'arrive bel et bien à modifié la classe du parent pour lui ajouter ".win" et supprimer le bouton "winner". Mais j'aimerais aussi modifié la couleur de la fléche du haut pour lui aussi lui attribuer la classe ".win" qui vas changer la couleur.
Cependant, dans le javascript, je n'arrive pas dans la var "test" à l'afficher. J'ai un message du type :
Uncaught TypeError: Cannot read property 'contains' of undefined
at HTMLButtonElement.setActive (tree.js:12)
Code:
document.addEventListener("DOMContentLoaded", function () {
function setActive() {
this.parentNode.classList.add("win");
if(this.parentNode.classList.contains("one")){
var id_arrow = this.parentNode.parentNode.getAttribute('id'), arrow_select = document.getElementById('arrow_' + id_arrow), arrow = arrow_select.childNodes;
for(var i = 0; i <= arrow.length; i++){
var test = arrow[i].classList.contains("group-container-line_top__left");
console.log("test")
}
}else{
console.log("chemin du bas");
}
this.remove();
}
var btn_click = document.querySelectorAll(".win");
btn_click.forEach(function(btn){
btn.addEventListener("click",setActive)
})
});