Forum : Ajout d'element ne fonctionne pas

Salut,

Mon HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Manage Players</title>  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <style> .users{ display: flex; flex-direction: row; align-content: space-between; } .users img{ margin: 0 5px; } </style> </head> <body> <div class="col-xs-8 col-sm-10 col-md-8 col-lg-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-1"> <div class="panel panel-default"> <div class="panel-heading"> <h2 class="center">Convocations U11 3</h2> </div> <div class="panel-body"> <table class="table table-striped"> <thead> <tr> <th>Joueurs</th> <th>Date</th> <th>Validation</th> </tr> </thead> <tbody> <tr> <th> <div class="users"> <img class="img-circle" src="http://placehold.it/50x50" alt=""> <h4 class="text-primary">MichKael</h4> </div> </th> <th> 10/09/2016</th> <th> <a href="#" class="btn btn-success" >Présent <span class="glyphicon glyphicon-ok"></span></a> </th> </tr> <tr> <th> <div class="users"> <img class="img-circle" src="http://placehold.it/50x50" alt=""> <h4 class="text-danger">James R.</h4> </div> </th> <th> 10/09/2016</th> <th> <a href="#" class="btn btn-danger remove">Absent <span class="glyphicon glyphicon-remove"></span></a> </th> </tr> <tr> <th> <div class="users"> <img class="img-circle" src="http://placehold.it/50x50" alt=""> <h4 class="text-danger">James R.</h4> </div> </th> <th> 10/09/2016</th> <th> <a href="#" class="btn btn-danger remove">Absent <span class="glyphicon glyphicon-remove"></span></a> </th> </tr> <tr> <th> <div class="users"> <img class="img-circle" src="http://placehold.it/50x50" alt=""> <h4>Leonel M.</h4> </div> </th> <th> 10/09/2016</th> <th> <div class="btn-group btn-group-sm" role="group" aria-label="Small button group"> <button type="button" class="btn btn-danger">Absent</button> <button type="button" class="btn btn-success">Présent</button> </div> </th> </tr> <tr> <th> <div class="users"> <img class="img-circle" src="http://placehold.it/50x50" alt=""> <h4>Cristiano R.</h4> </div> </th> <th> 10/09/2016</th> <th> <div class="btn-group btn-group-sm" role="group" aria-label="Small button group"> <button type="button" class="btn btn-danger">Absent</button> <button type="button" class="btn btn-success">Présent</button> </div> </th> </tr> <tr> <th> <div class="users"> <img class="img-circle" src="http://placehold.it/50x50" alt=""> <h4>Neymar J.</h4> </div> </th> <th> 10/09/2016</th> <th> <div class="btn-group btn-group-sm" role="group" aria-label="Small button group"> <button type="button" class="btn btn-danger">Absent</button> <button type="button" class="btn btn-success">Présent</button> </div> </th> </tr> </tbody> </table> </div> </div> </div> <script src="jquery/jquery.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html>

Mon JS

var choix = document.querySelectorAll('.btn-group .btn-danger') for(var i = 0; i < choix.length; i++){ choix[i].addEventListener('click', function(e){ var valeur = this.textContent var del = this.parentNode del.parentNode.removeChild(del) // var btn = document.createElement('a') btn.setAttribute('href','#') if(valeur == 'Absent'){ btn.innerHTML = 'Absent' btn.classList.add('text-danger','remove') document.body.appendChild(btn) }else{ btn.innerHTML = 'Présent <span class="glyphicon glyphicon-ok"></span>' btn.classList.add('text-primary') } del.appendChild(btn) console.log(btn) }) }

j'arrive à créer l'élement et à lui donner tous les attributs que je veux et je l'insere.
mais lorsque je clique sur le bouton l'element ne se creer pas et y'a aucune erreur

Ajout d'element ne fonctionne pas

5 réponses