Forum : Fonction ne marche pas correctement

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

mxmaxime

Réponse acceptée

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--

Frosty-Z

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)

Ekim Kael

Auteur

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

mxmaxime

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

Fonction ne marche pas correctement

4 réponses