Fonction ne marche pas correctement

Par Ekim Kael, il y a 9 ans

Javascript

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,.food{ 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> <button type="button" class="btn btn-primary" id="count">0</button> </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="food"> <img class="img-circle" src="http://placehold.it/50x50" alt=""> <h4>Burger</h4> </div> </th> <th>FastFood</th> <th> <div class="btn-group btn-group-sm fd" role="group" aria-label="Small button group"> <a href="#" class="btn btn-danger moins">moins</a> <a href="#" class="btn btn-success plus">plus</a> </div> </th> </tr> <tr> <th> <div class="food"> <img class="img-circle" src="http://placehold.it/50x50" alt=""> <h4>Potaoes</h4> </div> </th> <th>FastFood</th> <th> <div class="btn-group btn-group-sm fd" role="group" aria-label="Small button group"> <a href="#" class="btn btn-danger moins">moins</a> <a href="#" class="btn btn-success plus">plus</a> </div> </th> </tr> </tbody> </table> </div> </div> </div> <script src="app.js"></script> </body> </html>

Mon JS

var check = document.querySelectorAll('.fd a') for(var i = 0; i < check.length; i++){ check[i].addEventListener('click', function(e){ var plus = this.classList.contains("plus") var moins = this.classList.contains('moins') var count = document.querySelector('#count') var p = this.parentNode.parentNode.parentNode.querySelector('h4') // if(plus == true){ count.textContent++ console.log(p.textContent) }else{ count.textContent-- console.log(p.textContent) } }) }

Je voudrais que qu'on ne puisse pas décrementer en dessous de zéro
comment puis-je faire
Merci d'avance

4 réponses

Frosty-Z, il y a 9 ans

Salut,
Au niveau JS je dirais :

EDIT je vire ma proposition (il manquait un ParseInt()), suivre l'indication d'Emix plutôt.

Après, le mieux c'est d'avoir un "retour" au niveau de l'interface comme quoi les boutons "moins" n'a plus d'effet au moment où count vaut 0 => appliquer une classes CSS "disabled" par exemple, sur les liens correspondants (vu que tu utilises bootstrap)

mxmaxime, il y a 9 ans

Salut,
Si tu ne veux pas décrementer en dessous de zéro utilise une condition avant de décrementer ^^
Prends ton textContent avant et fait la condition :

var content = count.textContent content = parseInt(content,10) if (content >0) content--
Ekim Kael, il y a 9 ans

c'est de ça je parlais.
je voudrais que lorsque count = 0 on ne puisse plus décrémenter

mxmaxime, il y a 9 ans

Je n'ai pas regardé l'interface mais j'ai passé l'idée, à toi t'en faire ce que tu veux :-)