Convertir en valeur php la valeur d'un nombre incrémenté en javascript

Version imprimable

Bonjour, le Forum !
Voila mon souci depuis quelques jours. J'essaye pour un jeu de compter le nombre de coup du joueur.

J'ai un script java de type:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 NbEssais = 0; NbEssais++; status = "Nombre d'essais : " + NbEssais; if (NbEssais < 13 & resultat < num){ document.getElementById('para20').innerHTML= NbEssais; document.getElementById('para30').innerHTML= (" Trop petit !"); } if (NbEssais < 13 & resultat > num){ document.getElementById('para20').innerHTML= NbEssais; document.getElementById('para30').innerHTML= (" Trop grand !"); } if (NbEssais == 13 & resultat != num) { document.getElementById('para20').innerHTML= NbEssais; document.getElementById('para30').innerHTML= ('Alarme déclenchée !');
qui est bien envoyé dans ma page php et dont il m'affiche la valeur correctement. (Je n'ai pas mis mon script en entier.)

Et là, mon problème est que cette valeur, je voudrais l'enregistrer dans ma BDD.
Si je donne une variable comme: var essais = NbEssais = 0; ou bien var essais = NbEssais++; et que je fais un test php afin de vérifier si la valeur de cette variable est correcte, soit dans le premier cas, il m'affiche 0, soit dans l'autre cas j'ai un message d'erreur me disant que la variable n'est pas définie.
Bien sur, j'ai testé diverses solutions en vain et donc je me tourne vers vous pour essayer de comprendre mon erreur.

Merci.

18/03/2020, 17h49
NoSmoking

Bonjour,
pas compris où se situe ton problème !?!

Citation:

qui est bien envoyé dans ma page php et dont il m'affiche la valeur correctement.

Si c'est oK côté serveur alors tu n'est pas sur le bon forum, dis nus que l'on déplace.

Citation:

et que je fais un test php afin de vérifier si la valeur de cette variable est correcte, soit dans le premier cas, il m'affiche 0, soit dans l'autre cas j'ai un message d'erreur me disant que la variable n'est pas définie.

je croyais que c'était bon côté serveur !!! L'erreur est où, au final ?
18/03/2020, 21h14
phoenix11

Pas d'erreur sur mon script
Salut NoSmoking.

Effectivement, je n'ai pas d'erreur sur mon script. Le problème est le suivant:
Java me renvoie bien la valeur NbEssais dans mon span #para20.

Le souci est que je n'arrive pas à récupérer cette valeur afin de l'utiliser pour du php.
J'ai aussi compris que ce serait impossible car mon span ne peut contenir de value.

J'ai donc essayé de créer un un formulaire comme ci-dessous:
Code:

1 2 3 <form action="" method="post" > <input type="text" name="para21" id="para21" value="" /> </form>
Dans lequel j'envoie de mon script java ceci: document.getElementById('para21').value = NbEssais;.

La valeur s'affiche bien mais en faisant:
Code:

1 2 3 <?php echo $_POST['para21'.value]; ?>
Rien ne s'affiche .
Je voudrais récupérer cette valeur de pour l'enregistrer dans ma BDD.

Donc, j'ignore si mon erreur se trouve dans java, php ou simplement il est impossible de récupérer cette valeur.

Merci.
18/03/2020, 21h18
Invité

Bonjour,

c'est JavaScript ou JS.
Pas Java.
18/03/2020, 22h48
ProgElecT
Salut

<form action="" method="post" >, dans action= tu devrais y mettre le nom du fichier PHP qui récupère cette variable, celui qui contient le code
Code:

1 2 3 <?php echo $_POST['para21'.value]; ?>
19/03/2020, 08h24
Invité
Code:

1 2 3 <?php echo $_POST['para21']; ?>

Bonjour à vous,
Désolé pour mon défaut de débutant et ai pris note de marquer JS. Je vous remercie en outre de me prêter votre attention et le temps qui va avec.
En ce qui concerne mon souci, voila ma logique sur mon script JS.
1)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 /* Compter les tentatives*/ /* Je comptabilise les clics par l'interaction d'un bouton de ma page php*/ NbEssais = 0; NbEssais++; /* Puis, j'envoie dans un input de type hidden la valeur du nombre de clics*/ document.getElementById('para21').value = NbEssais; /* Je vais rechercher dans ce même input la valeur injecté précédemment */ var tenter = document.getElementById("para21"); /* Je tente de d'attribuer une ariable à cette valeur afin de l'utiliser pour mon php*/ var tente = tenter.value;
2) Puis, le code php de l'input qui récupère le nombre de clic :
Code:

1 2 3 <form action="jeu1.php" method="post" > <input type="text" name="para21" id="para21" value="" /> </form>
3) et pour récupérer cette valeur, j'ai fait:
Code:

1 2 3 4 <?php $tenter = "<script type='text/javascript'>document.getElementById('para21');</script>"; echo $tenter; ?>
Résultat: LE premier et second marche très bien, quand au troisième, bien que mon code source n'affiche aucune erreur, mon "echo" est vide.
Bien sur, cela aurait été plus simple de donner une variable à NbEssais ou à NbEssais++, mais cela ne fonctionne pas et me renvoie au mieux '0'.

Merci.

19/03/2020, 10h57
NoSmoking
Tu as donc un soucis côté serveur et de plus tu ne lis pas correctement les réponses

Citation:

3) et pour récupérer cette valeur, j'ai fait:

réponse donnée :
Code:

1 2 3 <?php echo $_POST['para21']; ?>
19/03/2020, 13h20
phoenix11
Si NoSmoking, j'ai testé:
Code:

1 2 3 4 <?php echo $_POST['para21']; ?>
Mais cela me renvoie une valeur vide. et bien évidemment cela ne m'indique aucune erreur.
19/03/2020, 14h45
Invité

Montre un code complet (avec noms des fichiers).

Citation:

Envoyé par phoenix11

qui est bien envoyé dans ma page php et dont il m'affiche la valeur correctement. (Je n'ai pas mis mon script en entier.)

peut-être aurais tu dû le mettre :aie:

Un petit fichier, qui recharge la page, à tester :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
$nbClick = isset($_POST["nb-clicks"]) ? $_POST["nb-clicks"] : 0;
?>
<p>Il y a eu <?php echo $nbClick ?> clic(s)</p>
<form action="<?php echo $_SERVER['SCRIPT_NAME'] ?>" method="POST">
  <input type="hidden" name="nb-clicks" value=" <?php echo $nbClick ?>">
  <button>Envoi</button>
</form>
<button id="action">Ajout clic</button>
<script>
const oBtn = document.getElementById("action");
oBtn.onclick = function () {
  // récup. champ concerné
  const oInput = document.querySelector("input");
  // lecture valeur
  let valeur = +oInput.value;
  // incrémentation valeur
  valeur += 1;
  // affectation nouvelle valeur
  oInput.value = valeur;
};
</script>

Mon code de la page jeu1.php
Quelques explications:
Dans le div"trois", les champs de chaque ligne doivent servir à l'historique de la partie en cours (essais n°, nombre proposé, indice)
En dessous, on affiche les numéros choisis dans des input
Les classes du carrousel servent au jeu
La classe "bleu3" affiche les résultat d'un essais par le clic du bouton
et la fonction qui suit,

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<div class="noir">
   <div class="jaune">
      <p>Historique</p>
         <div class="trois">
		<div class="hist"><span> 1/ </span><span id="T1"> 1234 </span><span id="ind1"> trop petit </span></div>
		<div class="hist"><span> 2/ </span><span id="T2"> 1234 </span><span id="ind2"> trop petit </span></div>
		<div class="hist"><span> 3/ </span><span id="T3"> 1234 </span><span id="ind3"> trop petit </span></div>
		<div class="hist"><span> 4/ </span><span id="T4"> 1234 </span><span id="ind4"> trop petit </span></div>
		<div class="hist"><span> 5/ </span><span id="T5"> 1234 </span><span id="ind5"> trop petit </span></div>
		<div class="hist"><span> 6/ </span><span id="T6"> 1234 </span><span id="ind6"> trop petit </span></div>
		<div class="hist"><span> 7/ </span><span id="T7"> 1234 </span><span id="ind7"> trop petit </span></div>
		<div class="hist"><span> 8/ </span><span id="T8"> 1234 </span><span id="ind8"> trop petit </span></div>
		<div class="hist"><span> 9/ </span><span id="T9"> 1234 </span><span id="ind9"> trop petit </span></div>
		<div class="hist"><span> 10/ </span><span id="T10"> 1234 </span><span id="ind10"> trop grand </span></div>
		<div class="hist"><span> 11/ </span><span id="T11"> 1234 </span><span id="ind11"> trop petit </span></div>
		<div class="hist"><span> 12/ </span><span id="T12"> 1234 </span><span id="ind12"> trop petit </span></div>
	 </div>
   </div>
</div>
 
<!-- ligne 3 -->	
<div class="noir3">
   <div class="noir3-1">
      <div class="jaune3">
         <div id="code">
         <p class="codetext">CODE</p>
         <p class="codetext2"></p>
      <form>
         <input type="text" id="resultM" name="mille" disabled />
         <input type="text" id="resultC" name="cent" disabled />
         <input type="text" id="resultD" name="dix" disabled />
         <input type="text" id="resultU" name="unit"  disabled />
      </form>    
         </div>
      </div>
 
	<div class="rouge3">
	   <div id="carousel-wrapper-M">
	        <span id="item-0M"></span>
	        <span id="item-1M"></span>
		<span id="item-2M"></span>
		<span id="item-3M"></span>
		<span id="item-4M"></span>
		<span id="item-5M"></span>
	        <span id="item-6M"></span>
	        <span id="item-7M"></span>
	        <span id="item-8M"></span>
		<span id="item-9M"></span>
 
           <div class="carousel-itemM item-0M">
              <div class="carousel-itemM item-0M">
    <form>
     <input type="radio" id="zeroM" name="nom" onclick="myFunctionM(this.value)"  value="0" /> 
     <h2><label for="zeroM">0</label></h2>
     <a class="arrowM arrowM-prevM" href="#item-1M" ></a>
     <a class="arrowM arrowM-nextM" href="#item-9M"></a>
    </form>
            </div>
 
  <div class="carousel-itemM item-1M">
<form>
  <input type="radio" id="unM" name="nom" onclick="myFunctionM(this.value)"  value="1" /> 
    <h2><label for="unM">1</label></h2>
    <a class="arrowM arrowM-prevM" href="#item-2M"  ></a>
    <a class="arrowM arrowM-nextM" href="#item-0M"></a>
    </form>
  </div>
 
  <div class="carousel-itemM item-2M">
<form>
  <input type="radio" id="deuxM" name="nom" onclick="myFunctionM(this.value)"  value="2" /> 
    <h2><label for="deuxM">2</label></h2>
    <a class="arrowM arrowM-prevM" href="#item-3M"></a>
    <a class="arrowM arrowM-nextM" href="#item-1M"></a> 
</form>
  </div>
 
  <div class="carousel-itemM item-3M">
<form>
  <input type="radio" id="troisM" name="nom" onclick="myFunctionM(this.value)"  value="3" /> 
    <h2><label for="troisM">3</label></h2>
    <a class="arrowM arrowM-prevM" href="#item-4M"></a>
    <a class="arrowM arrowM-nextM" href="#item-2M"></a>
    </form>
  </div>
 
  <div class="carousel-itemM item-4M">
<form>
  <input type="radio" id="quatreM" name="nom" onclick="myFunctionM(this.value)"  value="4" /> 
    <h2><label for="quatreM">4</label></h2>
    <a class="arrowM arrowM-prevM" href="#item-5M"></a>
    <a class="arrowM arrowM-nextM" href="#item-3M"></a>
</form>
  </div>
 
  <div class="carousel-itemM item-5M">
<form>
  <input type="radio" id="cinqM" name="nom" onclick="myFunctionM(this.value)"  value="5" /> 
    <h2><label for="cinqM">5</label></h2>
    <a class="arrowM arrowM-prevM" href="#item-6M"></a>
    <a class="arrowM arrowM-nextM" href="#item-4M"></a>
</form>
  </div>
 
  <div class="carousel-itemM item-6M">
<form>
  <input type="radio" id="sixM" name="nom" onclick="myFunctionM(this.value)"  value="6" /> 
    <h2><label for="sixM">6</label></h2>
    <a class="arrowM arrowM-prevM" href="#item-7M"></a>
    <a class="arrowM arrowM-nextM" href="#item-5M"></a>
</form>
  </div>
 
  <div class="carousel-itemM item-7M">
<form>
  <input type="radio" id="septM" name="nom" onclick="myFunctionM(this.value)"  value="7" /> 
    <h2><label for="septM">7</label></h2>
    <a class="arrowM arrowM-prevM" href="#item-8M"></a>
    <a class="arrowM arrowM-nextM" href="#item-6M"></a>
</form>
  </div>
 
  <div class="carousel-itemM item-8M">
<form>
  <input type="radio" id="huitM" name="nom" onclick="myFunctionM(this.value)"  value="8" /> 
    <h2><label for="huitM">8</label></h2>
    <a class="arrowM arrowM-prevM" href="#item-9M"></a>
    <a class="arrowM arrowM-nextM" href="#item-7M"></a>
</form>
  </div>
 
  <div class="carousel-itemM item-9M">
<form>
  <input type="radio" id="neufM" name="nom" onclick="myFunctionM(this.value)"  value="9" /> 
    <h2><label for="neufM">9</label></h2>   
    <a class="arrowM arrowM-prevM" href="#item-0M"></a>
    <a class="arrowM arrowM-nextM" href="#item-8M"></a>
</form>
</div>
</div>
 
</div>
</div>
 
	<div class="bleu3">
		<div class="resultat">
       <div id="para2"><p>Tentative N° : <span id="para20">0</span><span>/13</span></p></div>
       <div id="para1"><p>Votre Code : <span id="para10"></span></p></div>
       <div id="para3"><p><span id="para30"></span></p></div>
		</div>
	</div>
 
	<div class="vert4">
		<div class="code">
       <div id="bouton">
        <p><input type="button" onClick="concant();reload()" value="Ouvrir" /></p> 
       </div>      
		</div>
	</div>
 
	<div class="vert3">
		<div class="resultat2">
       <div id="para4">
        <p id="para40"></p>
		  <p id="para45"></p>
        </div> 
	</div>
	</div>
 
	<script>
function myFunctionM(browser) {
if (document.getElementById("resultM").value == "") {
        document.getElementById("resultM").value = browser;
}
else if(document.getElementById("resultC").value == "") {
        document.getElementById("resultC").value = browser;
}
else if(document.getElementById("resultD").value == "") {
        document.getElementById("resultD").value = browser;
}
else if(document.getElementById("resultU").value == "") {
        document.getElementById("resultU").value = browser;
}
}
</script>

Puis la page "java.php" qui traite la fonction JS qui traite les fonctions de concaténation et de reload
ainsi que le nombre aléatoire, le nombre d'essais, le compte à rebours afin de rejouer une partie.

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
81
82
<script type="text/javascript">
	    /* Lot aléatoire entre 1 et 5*/
	    var lot1 = Math.floor(Math.random() * 5) + 1;
            /* numéro aléatoire*/
            var num = Math.floor(Math.random() * 9999) + 1;
            /* Concanténer les 4 input pour en faire un nombre*/
            NbEssais = 0;
            /* Compte à rebours*/
            var cpt = 10;
            var petit = 'Trop petit';
            var grand = 'Trop grand';
            var alarme = 'Alarme déclenchée !';
 
 
function concant(){
                      var mille = document.getElementById("resultM");
                      var millier = mille.value;
                      var cent = document.getElementById("resultC");
                      var centaine = cent.value;
                      var dix = document.getElementById("resultD");
                      var dixaine = dix.value;
                      var un = document.getElementById("resultU");
                      var unite = un.value;
                      var resultat = millier.concat(centaine, dixaine, unite);
                      document.getElementById('para10').innerHTML= resultat; 
 
                      /* Compter les tentatives*/ 
                      /* Je comptabilise les clics par l'interaction d'un bouton sur ma page php*/
                      NbEssais++;          
 
                      /* Déterminer les actions selon le nombre d'éssais et le nombre*/
                      if (NbEssais < 13 & resultat < num){
                           document.getElementById('para20').innerHTML= NbEssais;
		           document.getElementById('para30').innerHTML= petit;
		           }
		      if (NbEssais < 13 & resultat > num){
                          document.getElementById('para20').innerHTML= NbEssais;
			  document.getElementById('para30').innerHTML= grand;
			  }
		      if (NbEssais == 13 & resultat != num) {
			  document.getElementById('para20').innerHTML= NbEssais;
			  document.getElementById('para30').innerHTML= alarme;
	timer = setInterval(function(){
             if(cpt>0)
               {
                --cpt; // décrémente le compteur
                document.getElementById('para40').innerHTML= num+ " était la solution !";
                document.getElementById("para45").innerHTML = "Nouvel essai dans " + cpt + " sec" ;
               }
             else
               {
                clearInterval(timer);
               }
               }, 1000);
               setTimeout("location.reload()",10000);		   
            }	
               if (resultat==num) {
                 document.getElementById('para20').innerHTML= NbEssais;
                 document.getElementById('para30').innerHTML= "Gagné " + lot1 +" lingots !";
		 timer = setInterval(function(){
                       if(cpt>0){
                           --cpt; // décrémente le compteur
                          document.getElementById('para40').innerHTML= (" Félicitation !");
                          document.getElementById("para45").innerHTML = "Nouveau coffre dans " + cpt + " secondes" ;
                       }
                       else {
                          clearInterval(timer);
                       }
                  }, 1000);
	 setTimeout("location.reload()",10000);		   
     }	
}
 
function reload(){
    var container = document.getElementById("code");
    var content = container.innerHTML;
    container.innerHTML= content; 
 
   //this line is to watch the result in console , you can remove it later	
    console.log("Refreshed"); 
}          
 </script>

20/03/2020, 12h39
phoenix11

Donc, voila mon souci :
Récupérer la valeur NbEssais++ à chaque clic en lui attribuant une variable, l'enregistrer sur ma BDD puis afficher cette valeur dans le le tableau Historique de la partie du joueur.

Si quelqu'un à une solution, car je ne n'arrive pas à attribuer la variable à cette valeur incrémenté (NbEsssais++)

Merci et bonne journée à toutes et à tous.
20/03/2020, 15h20
NoSmoking
Citation:

Mon code de la page jeu1.php
(... blabl ...)
Puis la page "java.php" qui traite la fonction JS

Je crois que tu as une grosse lacune concernant ce que tu peux faire
- JavaScript ➜ côté client
- PHP ➜ côté serveur
Là c'est le grand « foutoir », comment transmets-tu tes données côté serveur, tu as 11 <form> dans ton code mais aucun envoi n'est réalisé !

Au pire toutes tes fonctions devraient être dans la même page et les données envoyées en Ajax.

A lire : Cours : comprendre les mécanismes d'AJAX
21/03/2020, 11h02
phoenix11

Salut, ces <form> ne sont la que pour réaliser un graphisme permettant de sélectionner un chiffre à la fois dans une combinaison pour réaliser la combinaison d'un nombre de quatre chiffres. Il y a 2 flèches (haut et bas) pour sélectionner un chiffre, puis on clique sur le chiffre choisi pour le sélectionner afin de créer un nombre de quatre chiffre. c'est une fois ce nombre fait, que les fonctions (Concant et Myfonction) sont lancées. Seuls les chiffres sélectionnés sont postés.
C'est une solution que j'ai trouvé car je voulais réaliser visuellement un style de carrousel. C'est vrais que c'est un peu le foutoir, mais cela fonctionne très bien et visuellement, c'est réussi.
Je vais donc apprendre à utiliser Ajax avant de retourner sur mon script.
Merci beaucoup et je reviendrai pour poster la solution à mon problème (si je trouve).