Fonction répetitive en javascript

anto2b Messages postés 119 Date d'inscription   Statut Membre Dernière intervention   -  
anto2b Messages postés 119 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Voilà pour un jeu de carte, pour afficher la pioche j'utilise du javascript 


<html> 
<head> 
<SCRIPT LANGUAGE="Javascript">  
         
function piocher(id) 
{ 
 var e= document.getElementById('la_pioche'); 
 e.innerHTML= '<img width="90px" src=\"cartes/'+id+'"/>'; 
 e.style.display= 'block'; 
} 
</SCRIPT> 
</head> 
<body> 
<div onclick="piocher(\''.$pioche[0].'\');"></div> 
<div id="la_pioche"></div> 
</body> 
</html>


Quand je clique sur la div qui exécute la fonction js cela marche : la 1ere entrée du tableau pioche[0] qui est une variable en PHP s'affiche. j'aimerais que à chaque clique de souris, il y est ceci :

1er clic : affiche $pioche[0]
2eme clic : affiche $ pioche[1]
3e clique : affiche $pioche[2] etc .......

Merci de votre aide



A voir également:

18 réponses

Réponse 1 / 18
jiantox Messages postés 1092 Date d'inscription   Statut Membre Dernière intervention   114
 
salut

ta variable en php viens d'où ? ( si c'est de javascript sans ajax t'es balaise lol )

le plus simple serais d'incrémenter le numero de $pioche à chaque tour en passant ce numero en variable :

$num = 0;

function pioche($num) {
echo $pioche[$num];
$num++; }

et a chaque clique il rajoute 1 à num. un truc dans l'genre, à toi de voir apres selon ton codage, étant donné qu'on en a pas d'apercu.
1
Réponse 2 / 18
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
essaye ça, je n'ai pas testé: 
<html> 
<head> 
<script type="text/javascript"> 
var tableau_pioche=new Array();
<?php
//on va generer un array JS à partir de l'array php
for($i=0;$i<sizeof($pioche);$i++){
	echo 'tableau_pioche['.$i.']='.$pioche[$i].'';
}
?>
	//init compteur en variable globale
  var cpt=0;      
function piocher() 
{ 
	if(cpt<tableau_pioche.length){
	 var e= document.getElementById('la_pioche'); 
	 e.innerHTML= '<img width="90px" src="cartes/'+tableau_pioche[cpt]+'" />'; 
	 e.style.display= 'block'; 
	 cpt++;
	}else{
		alert('Fin de pioche atteinte');
	}
} 
</script> 
</head> 
<body> 
<div onclick="piocher();"></div> 
<div id="la_pioche"></div> 
</body> 
</html>
0
Réponse 3 / 18
anto2b Messages postés 119 Date d'inscription   Statut Membre Dernière intervention   1
 
Voila mon code source : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jeu de carte</title>
<link href="styles/style.css" rel="stylesheet" type="text/css" />
							 
<SCRIPT LANGUAGE="Javascript"> 
							 
function piocher(id)
{
	var e= document.getElementById('la_pioche');
	e.innerHTML= '<img width="90px" src=\"cartes/'+id+'"/>';
	e.style.display= 'block';
}
</SCRIPT>

</head>
<body>
<div id="container">
<?php 
include'connect_bdd.php'; 
$jeu = array();
$i =0;     
$reponse = $bdd->query('SELECT * FROM cartes ORDER BY RAND()'); 
while ($donnees = $reponse->fetch()) 
{ 
$jeu[$i] = $donnees['image'];
//echo'<img width="110px" src="cartes/'.$jeu[$i].'" />';
$i++;
}

echo '<h1> Joueur 1 </h1>';
echo'<div><table height="155px"><tr>';
for($i=0;$i<16;$i=$i+2)
echo'<td class="select_carte" style="z-index:'.$i.'"><img width="100%px" src="cartes/'.$jeu[$i].'" /></td>';
echo'</tr></table></div>';

// Passe entre jeu et pioche //
for( $j=0 , $i=17 ; $i<52 ; $i++ , $j++)
	 $pioche[$j] = $jeu[$i];
	 
echo '<table><tr><td width="400px"><h1> Carte depot </h1></td><td><h1> Pioche </h1></td></tr>';
echo'<tr><td width="400px"><img src="cartes/'.$jeu[16].'" <img width="90px"/></td><td><div onclick="piocher(\''.$pioche[5].'\');"><img src="img/dos.png" width="90px"/></div></td><td><div id="la_pioche"></div></td></tr></table>';
echo '<h1> Joueur 2 </h1>';
echo'<div><table height="155px"><tr>';
for($i=1;$i<16;$i=$i+2)
echo'<td class="select_carte" style="z-index:'.$i.'"><img width="100%px" src="cartes/'.$jeu[$i].'" /></td>';
echo'</tr></table></div>';



$reponse->closeCursor();  
?>
</div>
</body>
</html>




Alain42 votre méthode ne marche pas malheureusement
0
Réponse 4 / 18
jiantox Messages postés 1092 Date d'inscription   Statut Membre Dernière intervention   114
 
vois comme j'ai proposé, incrémenter à chaque click le numero de $pioche via une fonction ( ou encore mieu, la fonction déja existante au click ;) )
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 18
anto2b Messages postés 119 Date d'inscription   Statut Membre Dernière intervention   1
 
Comment faire ?
0
Réponse 6 / 18
jiantox Messages postés 1092 Date d'inscription   Statut Membre Dernière intervention   114
 
onclick="piocher(\''.$pioche[5].'\');" pk le n° 5 et pas un autre ?

j'ai un peu de mal a piger ton codage, ta variable $pioche tu la recupere ici ? :
$pioche[$j] = $jeu[$i];

si c'est le cas pk tu l'utiliserais pas pour l'envoyer dans ta fonction ?

j'ai du mal à voir ton but en fait ^^
0
Réponse 7 / 18
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
j'avais pas testé, modifie cette partie: 

//on va generer un array JS à partir de l'array php 
for($i=0;$i<sizeof($pioche);$i++){ 
 echo 'tableau_pioche['.$i.']="'.$pioche[$i].'";'; //cette ligne a modifier 
}


et d eplus comme tu defini ton array $pioche plus bas dans le php il faut que la fonction JS pioche() soit plus bas
tu peux très bien la déplacer juste avant la balise </body>

ce n'est pas obligatoire que toutes les fct JS soient dans le head
0
anto2b Messages postés 119 Date d'inscription   Statut Membre Dernière intervention   1
 
Cela ne marche toujours pas
0
Réponse 8 / 18
anto2b Messages postés 119 Date d'inscription   Statut Membre Dernière intervention   1
 
Non en fait le numéro 5 c'est juste un exemple lol.

Alors en fait $jeu c'est un Array contenant le jeu de 52 carte stocker dans une base de donnée.

J'ai fait une affectation à un array $pioche qui va contenir les (52-16) cartes (les 16 première cartes du jeu sont celles distribués aux 2 joueurs).

Et c'est la que j'aimerais qu'a chaque fois que je clique sur pioche il y est une incrémentation pour afficher la carte suivante de la pioche.
0
Réponse 9 / 18
jiantox Messages postés 1092 Date d'inscription   Statut Membre Dernière intervention   114
 
donc en gros il faudrais récuperer les 36 dernieres cartes qui reste, fait un compteur à part et les afficher

tu recupere le n° de la carte dans une variable ( exemple $num )
afficher la carte voulu ( $pioche[$num] )
et ensuite incrementer $num ( $num++; ) pour le prochain affichage
0
Réponse 10 / 18
anto2b Messages postés 119 Date d'inscription   Statut Membre Dernière intervention   1
 
Mais comment l'indiquer dans mon code javascript car il ne faut pas actualiser la page
0
Réponse 11 / 18
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
le code complet modifié, attention modif aussi dans le onclick="pioche() 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Jeu de carte</title> 
<link href="styles/style.css" rel="stylesheet" type="text/css" />        

</head> 
<body> 
<div id="container"> 
<?php  
include'connect_bdd.php';  
$jeu = array(); 
$i =0;      
$reponse = $bdd->query('SELECT * FROM cartes ORDER BY RAND()');  
while ($donnees = $reponse->fetch())  
{  
$jeu[$i] = $donnees['image']; 
//echo'<img width="110px" src="cartes/'.$jeu[$i].'" />'; 
$i++; 
} 

echo '<h1> Joueur 1 </h1>'; 
echo'<div><table height="155px"><tr>'; 
for($i=0;$i<16;$i=$i+2) 
echo'<td class="select_carte" style="z-index:'.$i.'"><img width="100%px" src="cartes/'.$jeu[$i].'" /></td>'; 
echo'</tr></table></div>'; 

// Passe entre jeu et pioche // 
for( $j=0 , $i=17 ; $i<52 ; $i++ , $j++) 
  $pioche[$j] = $jeu[$i]; 
   
echo '<table><tr><td width="400px"><h1> Carte depot </h1></td><td><h1> Pioche </h1></td></tr>'; 
////ATTENTION modif aussi dans cette ligne ci dessous onclick= 
echo'<tr><td width="400px"><img src="cartes/'.$jeu[16].'" <img width="90px"/></td><td><div onclick="piocher();"><img src="img/dos.png" width="90px"/></div></td><td><div id="la_pioche"></div></td></tr></table>'; 
///// 
echo '<h1> Joueur 2 </h1>'; 
echo'<div><table height="155px"><tr>'; 
for($i=1;$i<16;$i=$i+2) 
echo'<td class="select_carte" style="z-index:'.$i.'"><img width="100%px" src="cartes/'.$jeu[$i].'" /></td>'; 
echo'</tr></table></div>'; 



$reponse->closeCursor();   
?> 
<script type="text/javascript">  
var tableau_pioche=new Array(); 
<?php 
//on va generer un array JS à partir de l'array php 
for($i=0;$i<sizeof($pioche);$i++){ 
 echo 'tableau_pioche['.$i.']="'.$pioche[$i].'";'; 
} 
?> 
 //init compteur en variable globale 
  var cpt=0;       
function piocher()  
{  
 if(cpt<tableau_pioche.length){ 
 alert("tableau= "+tableau_pioche[cpt]); 
  var e= document.getElementById('la_pioche');  
  e.innerHTML= '<img width="90px" src="cartes/'+tableau_pioche[cpt]+'" />';  
   
  e.style.display= 'block';  
  cpt++; 
 }else{ 
  alert('Fin de pioche atteinte'); 
 } 
}  
</script>  
</div> 
</body> 
</html>
0
Réponse 12 / 18
anto2b Messages postés 119 Date d'inscription   Statut Membre Dernière intervention   1
 
Un grand merci, la methode d'Alain 42 marche. Mais j'aimerais qu'a la fin de la pioche ca recommence au debut de la pioche.
0
Réponse 13 / 18
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
modifies ta fonction: 
//init compteur en variable globale 
  var cpt=0;       
function piocher()  
{  
 if(cpt == tableau_pioche.length){ 
  cpt=0; 
 } 
 
  var e= document.getElementById('la_pioche');  
  e.innerHTML= '<img width="90px" src="cartes/'+tableau_pioche[cpt]+'" />';    
  e.style.display= 'block';  
  cpt++; 
  
}
0
Réponse 14 / 18
anto2b Messages postés 119 Date d'inscription   Statut Membre Dernière intervention   1
 
Pour finir il faudrait que la carte que je sélectionne de la pioche aille au joueur j1.

Comment faire ?
0
Réponse 15 / 18
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
le <div id="la pioche"> est bien dans la partie du jouer j1
0
Réponse 16 / 18
anto2b Messages postés 119 Date d'inscription   Statut Membre Dernière intervention   1
 
Faudrait que je crée une div a coté des cartes du joueur 1 ?
0
Réponse 17 / 18
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
je ne sais pas je ne visualise pas ta page, mais tu peux très bien rajouter un div avec un id obligatoirement différend, et mettre dans ta fct JS une autre instruction d' innerHTML 

var e2= document.getElementById('la_pioche2');  
  e2.innerHTML= '<img width="90px" ..........
0
Réponse 18 / 18
anto2b Messages postés 119 Date d'inscription   Statut Membre Dernière intervention   1
 
Par contre dans la pioche j'ai remarquer un souci. Quand je sélectionne une carte , il faudrait qu'elle sorte de la pioche, comment faire ?
0

Discussions similaires

java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
Remplir une cellule (texte) en fonction d'une autre (texte).
SOMUM -
SOMUM -

4 réponses
[Excel 2010] Remplir cellule d'après contenu d'une autre
nlbmoi -
amelie -

8 réponses
Excel : Remplir une cellule en fonction d'une autre
Alexisarnx -
votre psychiatre -

3 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses