fonction JavaScript

condition "if"

Le problème exposé dans ce sujet a été résolu.

Bonjour à tous !

Avec une fonctions JS, je change le background de ma ligne (tr) de mon tableau en cliquant sur cette ligne (this). J’ai également un input de type check dans ce tableau. Je n’arrive pas à trouver la condition afin que si je clique sur la ligne ou sur l’input le background change de couleur et l’input passe en checked Voici mon script JS :

`function check() { document.getElementById("bought-players").checked = true; } $(document).ready(function(){

$('table tr').click(function(){ $(this).toggleClass("high-light");  });
    document.getElementById("bought-players").checked = true;
});

` Merci par avance

+0 -0

Bonsoir, Il y a un petit soucis de formatage dans ton message pour ton code, et il semble manquer un }) à la fin pour que la syntaxe soit valide ;)

le bon code pour formater ton message

Voici le bon code pour formater ton code dans ton message sur le forum :

```js
function check() {
   document.getElementById("bought-players").checked = true;
}

$(document).ready(function(){

   $('table tr').click(function(){
       $(this).toggleClass("high-light");
   });

   document.getElementById("bought-players").checked = true;
});
```

et ça donne un résultat comme ça :) :

function check() {
   document.getElementById("bought-players").checked = true;
}

$(document).ready(function(){

   $('table tr').click(function(){
       $(this).toggleClass("high-light");
   });

   document.getElementById("bought-players").checked = true;
});

Concernant ton code en lui même, tu as crée une fonction check mais tu ne l’utilise pas, il y a donc une répétition évitable

function check() {
    document.getElementById("bought-players").checked = true;
}

$(document).ready(function(){

    $('table tr').click(function(){
        $(this).toggleClass("high-light");
    });

    document.getElementById("bought-players").checked = true;
});

Ça donne, après suppression de la répétition :

function check() {
    document.getElementById("bought-players").checked = true;
}

$(document).ready(function(){

    $('table tr').click(function(){
        $(this).toggleClass("high-light");
    });

    check();
});

Je suppose que tu souhaite que ton input de type check #bought-players soit cochée quand on clique sur un tr, hors actuellement elle est cochée au chargement de la page si l’on suit ton code :D

Il faut déplacer l’appel de la fonction check() dans l’événement de click comme ceci :

function check() {
    document.getElementById("bought-players").checked = true;
}

$(document).ready(function(){

    $('table tr').click(function(){
        $(this).toggleClass("high-light");

        check();
    });
});

Est-ce que ton problème est résolu, et si oui, as-tu compris la solution :) ?

+1 -0

Merci Drulac pour ta réponse. Effectivement tu supposes bien. Mon code était bon, c’est juste que je ne rappelle pas la fonction check dans la seconde fonction. Je viens de tester le code, le problème est que quand je clique sur une ligne, le background change mais c’est la 1ere case qui se coche et uniquement la 1ere. Peu importe ou je clique Est ce du à #bought-players qui est une ID et donc logiquement unique. Merci pour ta réponse

+0 -0

Pas de souci voici mon code html : 

<section class="listFutMilli">

    <h1>Liste des cartes spéciales entre 10k et 100k crédits</h1>
    <div class="infos">
    <p>Pour relister les joueurs au meilleur prix, il faut multiplier par 1,13 le prix d'achat. L'outil ci-dessous est là pour le calculer. Attention à ne pas investir pendant des évènements et à vider la liste des transferts avant le vendredi (nouvel évènement). Comme d'habitude, un style chasseur ou ombre pour le poste approprié est un plus.
Une fois le joueur acheté, en cliquant sur la ligne correspondante, celle-ci change de couleur afin de savoir où l'on s'est arrêté.
    </p>
    <form action="#" method="post" class="calculatrice">
    <div>
        <label for="prixAchat">Prix d'achat Carte Spéciale: </label>
        <input type="text" name="prixAchat" id="prixAchat" required>
        <button class="custom-btn btn-9" type="submit" name='submit'>Calculer les bénéfices</button>
    </div>
</form> 
<?php if (isset($_POST['submit'])):?>
    <ul class="benefices">
        <li>Le prix d'achat est : <span><?= $prixAchat ?></span> crédits</li>
        <li>Le prix de vente est <span><?= $prixVente ?></span> crédits</li>
        <li>La taxe EA est de : <span><?= $taxeEA ?></span> crédits</li>
        <li>Le bénéfice réalisé sera de : <span><?= $benefice ?></span> crédits</li>
    </ul>
<?php endif;?>

    </div>
        <table>
            <tr>
                <th class="column-name">Nom du joueur</th>
                <th class="column-name">Club</th>
                <th class="column-name">Pays</th>
                <th class="column-name">Championnat</th>
                <th class="column-name">Note</th>
                <th class="column-name">Position</th>
                <th class="column-name">Version</th>
                <th class="column-name">Prix</th>
                <th class="column-name">  </th>
            </tr>
           <tr><?php foreach ($players as $player):?>
                <td><?= $player[0];?></td>
                <td><?= $player[1];?></td>
                <td><?= $player[2];?></td>
                <td><?= $player[3];?></td>
                <td><?= $player[4];?></td>
                <td><?= $player[5];?></td>
                <td><?= $player[6];?></td>
                <td><?= $player[7];?></td>
                <td><input type="checkbox" id="bought-players" name="bought-players" class="check" check></td>
            </tr><?php endforeach; ?>
 
        </table>

</section>

De plus, j’ai remarqué que non seulement la 1ere ligne est la seule a etre cochée mais aussi je ne peux pas la décocher :'(

Merci d’avance

+0 -0

c’est beaucoup mieux comme ça !

Tu peux même rajouter html (le nom du langage) derrière les 3 ``` du début (pour avoir ```html) pour qu’il y ait une colorisation syntaxique :D

Ligne 37

Ligne 37, je pense qu’il y a un soucis dans ton code :

<tr><?php foreach ($players as $player):?>

En effet, la balise d’ouverture <tr> est à l’extérieur de ta boucle. Il n’y a donc qu’une ouverture pour tous les éléments du tableau o_O

Je pense que ton ouverture <tr> devrait surement être à l’intérieur de ta boucle, comme ceci ;)

<?php foreach ($players as $player):?><tr>
L’id bought-players

Mis à part ça, il y a effectivement un problème avec ton id bought-players à la ligne 46 : puisque c’est dans une boucle, tu vas avoir plusieurs fois l’id :D 

<td><input type="checkbox" id="bought-players" name="bought-players" class="check" check></td>

utiliser une classe serait plus logique qu’un id =>

<td><input type="checkbox" name="bought-players" class="bought-players check" check></td>
Adapter le code JS

Pour adapter ton code JS du dessus, il n’y as pas grand chose à modifier :)

function check() {
   document.getElementById("bought-players").checked = true;
}

$(document).ready(function(){

   $('table tr').click(function(){
       $(this).toggleClass("high-light");

       check();
   });
});

Dans le code suivant je vais enlever la fonction check pour alléger mon explication ;)

Ton code réagit à l’événement click sur un tr, on récupère ce tr via this

Hors ton input checkbox bought-players est une balise enfant de ton tr

On utilise donc la fonction querySelector(sélecteur) pour sélectionner 1 enfant de notre élement =>

this.querySelector(sélecteur)

Il nous reste à définir le sélecteur en question, en utilisant la syntaxe des sélecteurs CSS, pour en savoir plus tu peux lire la document MDN :)

Pour désigner une classe on met un . devant son nom, ce qui donne :

this.querySelector(".bought-players")

Maintenant qu’on a récupéré notre input checkbox, on va la cocher :D

this.querySelector(".bought-players").checked = true

On insère ça dans le reste du code à la place de l’appel à la fonction check() ;)

$(document).ready(function(){

   $('table tr').click(function(){
       $(this).toggleClass("high-light");

       this.querySelector(".bought-players").checked = true
   });
});
toggle ?

En lisant ton code, je suppose que tu veuille qu’on puisse décocher la checkbox ?

Ça serait peut-être un peu te mâcher le travail que de te donner la solution toute faite :D

Pour aller plus loin si tu veux

À moins que tu ne le réutilise ailleurs, tu n’as pas besoin de la classe bought-players grâce aux sélecteur, il suffit de chercher une input[type=checkbox] :D

Ça donne ce JS

this.querySelector("input[type=checkbox]").checked = true

Et ça permet de supprimer la classe dans ton HTML

<td><input type="checkbox" name="bought-players" class="check" check></td>

Ta classe restante check te sert à quoi ? Tu n’en as probablement pas besoin non plus :)

+1 -0

Merci Drulac pour toutes ces infos et corrections. Tout fonctionne nickel !

Effectivement, j’aimerai que si l’on reclique sur le 'tr’, la ligne redevient comme elle était et que la case se décoche.

Tu as fait énormément déjà, je t’en remercie ! je vais regarder cela je pense qu’avec une condition 'if' - 'else' pourrait me résoudre mon problème.

Bonne soirée à toi et encore merci

+1 -0

Hello Drulac, effectivement j’ai effectué les changements que tu m’as conseillé et c’est clairement mieux. En ce qui concerne le 'if' - 'else' je n’y arrive pas. La case ne se décoche jamais.

    $(document).ready(function(){
        if(document.querySelector("input[type=checkbox]").checked = true){
        $('table tr').click(function(){
            $(this).toggleClass("high-light");
            this.querySelector("input[type=checkbox]").checked = true
        });
    } else {
        $('table tr').click(function(){
            $(this).toggleClass("high-light");     
            this.querySelector("input[type=checkbox]").checked = false
});
    };
     });

Peux tu me dire d’ou vient le souci?

Merci d’avance

+0 -0

L’idée est là, tu utilise les bonnes fonctions :) !

le soucis vient du fait que tu à mis la fonction qui s’éxecute lors d’un click dans le if-else, hors ça devrait être l’inverse : ton if-else doit être dans ta fonction qui s’éxecute lors d’un click ;)

+1 -0 
    $(document).ready(function(){
        $('table tr').click(function(){

        if(document.querySelector("input[type=checkbox]").checked = true){
            $(this).toggleClass("high-light");
            this.querySelector("input[type=checkbox]").checked = true
        } else {
            $(this).toggleClass("high-light");     
            this.querySelector("input[type=checkbox]").checked = false
};
    });
     });

Même avec les changements apportés j’ai le problème. Ca ne veut pas se décocher :'(

+0 -0

En effet, il y a un petit soucis dans la condition du if ;)

if (document.querySelector('input[type=checkbox]').checked = true){
  • un seul = sert à assigner une valeur à une variable
  • == ou === servent à tester si une valeur est égale à une autre

Je t’invite à lire la documentation pour comprendre la différence exacte entre == et ===

Pour simplifier rapidement je dirais qu’il vaut mieux privilégier en général le === car c’est plus stricte ;)

Dis moi si tu arrives à t’en sortir :)

+1 -0

J’ai bien refait comme tu m’as dit et plus rien ne se coche. Je suis vraiment désolé de t’embêter avec ça

    $(document).ready(function(){
        $('table tr').click(function(){

        if(document.querySelector("input[type=checkbox]").checked === true){
            $(this).toggleClass("high-light");
            this.querySelector("input[type=checkbox]").checked = true
        } else {
            $(this).toggleClass("high-light");     
            this.querySelector("input[type=checkbox]").checked = false
};
    });
     });

Oui j’ai compris la différence entre == et ===. Les deux sont des comparateurs mais le === compare également le type de données Comme tu dis c’est plus strict

+0 -0

Y a pas de mal à demander de l’aider :)

Tu peux déjà sortir cette ligne du if, puisqu’elle sera dans tous les cas exécutée, ça évite de l’avoir 2 fois dans le code ;)

$(this).toggleClass('high-light')

Ensuite pourquoi rien ne se coche plus… C’est assez simple :D

Si tu analyse ta condition : tu regarde si ta case est cochée. Si elle est cochée, alors tu la coche :-°
Et inversement, si ta case n’est pas cochée, alors tu la décoche :-°

+1 -0

De rien, ça fait plaisir d’aider des gens à avancer dans leurs projets :)

Je t’ai laissé chercher avec ton if-else parce qu’on apprend plein de choses en faisant par nous même :)

Pour aller plus loin tu sauras qu’il existe cependant une fonction toggleAttribute(name) qui te permet d’écrire encore moins de code :D !

$(document).ready(function () {
	$('table tr').click(function () {
		$(this).toggleClass('high-light')
		this.querySelector('input[type=checkbox]').toggleAttribute('checked')
	})
})

Si tu veux encore aller plus loin, tu peux modifier ton code pour te passer de JQuery et ainsi alléger ton site web :) !

+1 -0

Merci beaucoup Drulac. En ce qui concerne le Jquery, je dois obtenir un diplôme en leur envoyant un site avec les différents langages. Donc je vais le laisser même si je suis pas fan.

J’ai récupéré le code que tu m’as laissé. Mais je me suis aperçu d’un truc: Il y a que la première ligne qui fonctionne correctement. Les autres lignes ne se décochent pas alors qu’elles change de couleur de fond. Je ne comprends pas pourquoi il me prend que la première. Dois je faire un foreach?

+0 -0

Salut Drulac, non je n’ai pas encore la version en ligne, mais je suis aperçu que c’était un problème de navigateur lorsque la taille de l’écran était réduite.
J’ai rééssayé aujourd’hui et il n’y a plus le problème.
Je verrais une fois le site mis en ligne.
En tout cas je te remercie pour tout.
Bonne soirée.

+1 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte