click sur une serie de boutons

Version imprimable

Bonjour,
J ai 7 boutons:["#btnf0","#btnf1","#btnf2","#btnf3","#btnf4","#btnf5","#btnf6"]
quand je click sur un bouton je souhaite que celui ci devienne vert si il est rouge et vice-versa.
par ailleurs je souhaite que l utilisateur ne puisse pas cliquer plus de 2 fois sur un bouton (pas pris en compte dans ce que j ai déjà fait).
ma petite routine ne fonctionne pas. merci pour votre aide.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var TabFonction=["#btnf0","#btnf1","#btnf2","#btnf3","#btnf4","#btnf5","#btnf6"];
 
$(document).ready(function(){ 
 
      $.each(TabFonction, function(value) {
 
        $(value).click(function() {
 
            $(this).data('clicked', true);
            if ($(value).data("clicked")) {
            var iswhat= $(value).css("background-color","red");
                 if(iswhat){
                                 $(value).css("background-color","green");
                }else {
                                $(value).css("background-color","red");
};
};
});
});

01/05/2022, 09h41
mathieu

montrez nous un test complet avec le code html pour qu'on puisse tester.

Bonjour,
Oui je vais essayer. je n'en suis qu'à mes débuts. merci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html>
 
<head>
    <title>Le titre de ma page web</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <script type="text/javascript" src="rangeslider.js"></script>
</head>
<header>
 
</header>
 
<body>
 
 
 
	<div id="conteneur">
		<div class="vitesse">
            <div classe="choixloco">
                <button class="btncmdloco1" type="button" id="btnloco1" style="background-color:red;">Loco1OFF</button>
               <button class="btncmdloco2" type="button" id="btnloco2" style="background-color:grey;">Loco2OFF</button>
                </div>
            <div classe="SpeedReading">
                <button class="btnvalidation" type="button" id="btnvalidation" style="background-color:grey;">Validation</button> 
            <p class="SpeedTrain">vitesse: <span id="demo"></span></p>
		    </div>
            <div classe="SpeedSlider">
            <input type="range" oninput="FunctionSpeed(this.value)" min="1" max="128" value="50" class="slider" id="myRange" style="width:80%" ; ></input>
            </div>
    </div>
 
		<div class="Cmd">
            <div class="CmdStartCentral">
                <button class="btnCmd" type="button" id="btnStartCentral" style="background-color:red;">Central OFF</button>    
            </div>
           <div class = CmdRange> 
               <button class="btnCmd" type="button" id="btnEmergency" style="background-color:grey;">Stop Emergency</button>
               <button class="btnCmd" type="button" id="btnSmooth" style="background-color:grey;">Smooth Stop</button>
            </div>
           <div class = CmdRange> 
               <button class="btnCmd" type="button" id="btnIDLE" style="background-color:grey;">IDLE</button>
               <button class="btnCmd" type="button" id="btnGeneralStop" style="background-color:grey;">STOP ALL</button>
            </div>
 
 
 
		</div>
 
		<div class = "fonctions">
                       <div class = fonctionsrangeFL> 
            <button class="btnfonction" type="button" id="btnf0" style="background-color:red;">f0</button>
                       </div>
            <div class = fonctionsrange> 
            <button class="btnfonction" type="button" id="btnf1" style="background-color:red;">f1</button>
            <button class="btnfonction" type="button" id="btnf2" style="background-color:red;">f2</button>
            <button class="btnfonction" type="button" id="btnf0" style="background-color:red;">f3</button>
            <button class="btnfonction" type="button" id="btnf1" style="background-color:red;">f4</button>
                        </div>
                        <div class = fonctionsrange> 
            <button class="btnfonction" type="button" id="btnf2" style="background-color:red;">f5</button>
            <button class="btnfonction" type="button" id="btnf0" style="background-color:red;">f6</button>
            <button class="btnfonction" type="button" id="btnf1" style="background-color:red;">f7</button>
            <button class="btnfonction" type="button" id="btnf2" style="background-color:red;">f8</button>
                        </div>
                        <div class = fonctionsrange> 
            <button class="btnfonction" type="button" id="btnf0" style="background-color:red;">f9</button>
            <button class="btnfonction" type="button" id="btnf1" style="background-color:red;">f10</button>
            <button class="btnfonction" type="button" id="btnf2" style="background-color:red;">f11</button>
            <button class="btnfonction" type="button" id="btnf0" style="background-color:red;">f12</button>
           </div>
 
		</div>
	</div>
 
</body>
 
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
#conteneur {
  display:flex;
  flex-wrap: wrap;
  justify-content:space-between;
  margin:50px;
}
 
.vitesse .choixloco {
  display: flex;
  flex-flow: nowrap;
}
 
.fonctions .btnfonction {
height: 110px;
width:110px;
margin-bottom: 20px;
}
 
.fonctions .fonctionrange{
  display:flex;
  flex-wrap: wrap;
  justify-content:space-between;
}
 
.fonctions .fonctionsrangeFL .btnfonction{
  height: 120px;
  width:450px;
  margin-bottom: 20px;
}
 
 
.Cmd .cmdRange{
  display:flex;
  flex-wrap: wrap;
  justify-content:space-between;
}
 
.Cmd .btnCmd {
  height: 120px;
  width:120px;
  margin-bottom: 20px;
  }
 
  .Cmd .CmdStartCentral .btnCmd{
    height: 130px;
    width:  240px;
    margin-bottom: 20px;
    }
 
.slider {
 
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
 
  }
 
  .vitesse .btncmdloco1{
    height: 150px;
    width:150px;
    margin-bottom: 20px;
    }
 
  .vitesse .btncmdloco2{
    height: 150px;
    width:150px;
    margin-bottom: 20px;
  margin-right:150px;
    }
 
    .vitesse .btnvalidation{
      height: 150px;
      width:150px;
      margin-bottom: 20px;
    margin-right:50px;
      }

Bonjour,
déjà il y a incompréhension des méthodes utilisées :

Code:

var iswhat= $(value).css("background-color","red");

cette ligne affecte une valeur CSS mais ne la lit pas, voir la documentation : jQuery.css(), de plus attention au format de retour de la méthode souvent source de souci.

Dans ton cas il me semble préférable que tu passes par l'affectation/changement de classe CSS dédiées.

Dans ton HTML tu remplaces les « styles inline » par

Code:

<button class="btnfonction btn-bg-color-red" type="button" id="btnf1">f1</button>

ensuite tu définies les classes CSS, par exemple :
Code:

1 2 3 4 5 6 7 8 9 .btn-bg-color-grey { background-color:grey; } .btn-bg-color-red { background-color:red; } .btn-bg-color-green { background-color:green; }
Maintenant tu peux gérer la classe CSS suivant le cas
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 // fonction commune au click function handleClick() { const classList = this.classList; // test sur les classes CSS if (classList.contains("btn-bg-color-red")) { classList.replace("btn-bg-color-red", "btn-bg-color-green"); } else if (classList.contains("btn-bg-color-green")) { classList.replace("btn-bg-color-green", "btn-bg-color-red"); } } // affectations événement au click const elemButtons = document.querySelectorAll("button"); elemButtons.forEach((btn) => { btn.addEventListener("click", handleClick); })
il te reste à adapter ;)

Bonsoir à tous,

Exemple pour un changement de couleur avec un compteur limité à 2 clicks.
Pour les boutons, créer une class "redcolor" et un data-compteur avec une valeur de "2"

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class = "fonctions">
    <div class = fonctionsrangeFL> 
        <button class="btnfonction redcolor" type="button" id="btnf0" data-compteur="2">f0</button>
    </div>
        <div class = fonctionsrange> 
            <button class="btnfonction redcolor" type="button" id="btnf1" data-compteur="2">f1</button>
            <button class="btnfonction redcolor" type="button" id="btnf2" data-compteur="2">f2</button>
            <button class="btnfonction redcolor" type="button" id="btnf3" data-compteur="2">f3</button>
            <button class="btnfonction redcolor" type="button" id="btnf4" data-compteur="2">f4</button>
        </div>
        <div class = fonctionsrange> 
            <button class="btnfonction redcolor" type="button" id="btnf5" data-compteur="2">f5</button>
            <button class="btnfonction redcolor" type="button" id="btnf6" data-compteur="2">f6</button>
            <button class="btnfonction redcolor" type="button" id="btnf7" data-compteur="2">f7</button>
            <button class="btnfonction redcolor" type="button" id="btnf8" data-compteur="2">f8</button>
        </div>
        <div class = fonctionsrange> 
            <button class="btnfonction redcolor" type="button" id="btnf9" data-compteur="2">f9</button>
            <button class="btnfonction redcolor" type="button" id="btnf10" data-compteur="2">f10</button>
            <button class="btnfonction redcolor" type="button" id="btnf11" data-compteur="2">f11</button>
            <button class="btnfonction redcolor" type="button" id="btnf12" data-compteur="2">f12</button>
        </div>
 </div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* les class  avec leur couleur */ 
 
.redcolor {
  background-color: red;
}
 
.greencolor {
  background-color: green;
}
 
.graycolor {
  background-color: gray;
  pointer-events: none;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// En JQuery
        $('.btnfonction').on('click', function () {
            //Compteur pour deux click par bouton
            var compteur = parseInt($(this).attr('data-compteur')); // On récupère la valeur de l'attribut data-compteur   
 
            if (compteur > 0) { // Si supérieur à 0
                $(this).attr('data-compteur', compteur -= 1); // On décompte
 
                //Si compteur Ok alors on applique le changement de couleur sur le bouton
                if ($(this).hasClass('redcolor')) { // on vérifie l'existence de la class
                    $(this).removeClass('redcolor').addClass('greencolor'); // Si la couleur est déjà rouge alors supprime la class "redcolor" et crée la class "greencolor"
                } else {
                    $(this).removeClass('greencolor').addClass('redcolor'); // Sinon le l'inverse
                }
            } else { // Compteur à 0
                $(this).removeClass('greencolor redcolor').addClass('graycolor');
            }
        })