Suppression multiple ne marche pas
Bonjour,
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>
<!-- Bootstrap -->
<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-8 col-md-8 col-lg-8 col-lg-offset-2">
<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>Nouchi35</h4>
</div>
</th>
<th> 10/09/2016</th>
<th>
<button type="button" class="btn btn-success" >Présent <span class="glyphicon glyphicon-ok"></span></button>
<button type="button" class="btn btn-success" ><span class="caret"></span></button>
</th>
</tr>
<tr>
<th>
<div class="users">
<img class="img-circle" src="http://placehold.it/50x50" alt="">
<h4>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>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
<script>
var remove = document.querySelectorAll('.remove')
for(var i = 0; i < remove.length; i++){
var del = remove[i]
var classe = del.classList
del.addEventListener('click', function(e){
e.preventDefault
classe.remove('btn-danger','remove')
del.innerHTML = 'Présent <span class="glyphicon glyphicon-ok"></span>'
classe.add('btn-success','present')
})
}
</script>je voudrais que chaque fois que je clique sur un bouton "absent" il passe au à "présent"
pour le moment ça ne fonctionne que sur un seul
peu importe lequel tu appuis ça change juste le 2ème
je voudrais que ça change celui qui est appuyer
Merci d'avance
1 réponse
Regarde la formation: https://www.grafikart.fr/formations/debuter-javascript/events
A partir de 4minutes, c'est exactememt le même problème et il explique pourquoi se comportement se déroule. ^^