Programmation javascript

picto8679 · 27/01/2011, 01h04

bonjour a tous

J'ai donc envoyer avec mon message la page html donc j'ai des problemes.
Voila je sais ici qu il y a des gens forts en javascript.

Le code qui se trouve dans la page html, c 'est de lancer des dés aleatoirement, bon je dois finalement remplacer les boutons dés par des images qu j'ai mais je n'arrive pas a les remplacer.

Il faut que quand les des ont fini de tourner, qu il affiche aussi en texte son nombre.

Ensuite je ne sais pas programmée le résultats de ces deux dés qui tournent aleatoirement, il faut que le r'sultat s aafiche une fois les des tournés.

Voici le code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<html>
 
	<head>
		<title>Lancer de dés</title>
 
			<script language="javascript">
			var nombre;
			var tabphotos = new Array("image1.jpg","image2.jpg", "image3.jpg","image4.jpg","image5.jpg","image6.jpg");
			nombre = Math.floor(Math.random() * tabphotos.length);
			function ini() {
			doc.de1.value=parseInt(Math.random()*6+1);
			doc.de2.value=parseInt(Math.random()*6+1);
			}
			function restart() {
			doc.de1.value=0;
			doc.de2.value=0;
			}
 
			</script>
			<body>
			<form name="doc">
			<input type="button" value="Lancer" onclick="ini()"><br />
			<input type="button" name="de1" value="" />
			<input type="button" name="de2" value="" /><br />
			<input type="button" value="Reset" onclick="restart()" />
			</form>
			</body>
 
			</html>

Je suis novice et j'aimerais de l'aide....
Ce serait vraiment gentil.
N'hésitez pas a me repondre et je vous remercie d'avance.

RomainVALERI · 27/01/2011, 09h32

Entre autres, il y a 3 erreurs ici :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

doc.de1.value=parseInt(Math.random()*6+1);

1) l'accès à ton input ne fonctionnera pas (à moins que tu aies fait une référence sur "document" appelée "doc" ^^). Essaie plutot de leur mettre un id et d'accèder par getElementById :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="button" name="de1" id="de1" value="" />

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

var de1 = document.getElementById("de1");

2) parseInt prend un second paramètre (radix) pour la base de conversion. Comme tout le monde 99% du temps, c'est de la base 10 qu'il te faut. Il est considéré comme une bonne pratique de l'ajouter, pour éviter la conversion implicite en octal dans le cas d'une chaine paramètre commençant par "0".

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("de1").value=parseInt((Math.random()*6+1), 10);

3) Tu voulais simuler des dés à 7 faces ou c'est mes yeux ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var de1a6 = Math.round((Math.random() * 6) + 0.5)

... ça devrait aller mieux

Mais il y a d'autres problèmes, la liste n'est pas finie... ^^ (le fait que le script soit placé dans le head et s'exécute tout de suite donc les éléments qu'on essaie d'obtenir n'existent pas encore dans le DOM, la variable "nombre" est inutilisée, l'attribut de la balise script est obsolète, etc.)

nounetmasque · 27/01/2011, 09h55

En plus des remarques précédentes, pour afficher les images des dés tu dois utiliser la méthode innerHTML en fonction des valeurs définies.

Voici le code HTML mise à jour :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<body>
		<form name="doc">
			<input type="button" value="Lancer" onclick="ini()"><br />
			<div id="img_de1"></div>
			<input type="button" id="de1" value="" />
			<div id="img_de2"></div>
			<input type="button" id="de2" value="" /><br />
			<input type="button" value="Reset" onclick="restart()" />
		</form>
	</body>

Ainsi que le code JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
function ini() {
	var val1 = parseInt((Math.random()*6+0.5), 10);
	var img1 = document.getElementById('img_de1');
	var de1 = document.getElementById('de1');
 
	if(img1 != null && de1 != null){
		img1.innerHTML = '<img src="./image' + val1 + '.jpg" />';
		de1.value = val1;
	}
}

Auteur · 27/01/2011, 21h31

Citation:

Envoyé par nounetmasque

En plus des remarques précédentes, pour afficher les images des dés tu dois utiliser la méthode innerHTML en fonction des valeurs définies.

ouh là

Insère directement une balise img avec un src pointant vers une image transparente ou de la couleur du fond avant de lancer les dés.
Lorsque la fonction ini() est exécutée on change uniquement le src de la balise.

picto8679 · 28/01/2011, 17h36

Bonjour à tous

je suis vraiment nul, bon je vous remercie tous de m'aider car je vais pouvoir comprendre les fonctions, et progresser. Il y a pas longtemps que je pratique le javascript.

J'ai essayer vos propositions et je n'arrive pas a inserer mes images et mon code est pas correct.

je suis vraiment un vrai novice.....

Si vous pouviez me dire ce qui va pas...

En plus comment on créer pour afficher le résultat des deux des ....

En attente...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<html>
 
	<head>
		<title>Lancer de dés</title>
 
			<script language="javascript">
			function ini() {
			var val1 = parseInt((Math.random()*6+0.5), 10);
			var img1 = document.getElementById('image1.jpg","image2.jpg", "image3.jpg","image4.jpg","image5.jpg","image6.jpg');
			var de1 = document.getElementById('de1');
			var de2 = document.getElementById('de2');
 
			if(img1 != null && de1 != null){
			img1.innerHTML = '<img src="./image1' + val1 + 'image1.jpg" />';
			de1.value = val1;
			}
			if(img1 != null && de2 != null){
			img1.innerHTML = '<img src="./image1' + val1 + 'image1.jpg" />';
			de2.value = val1;
			}
 
			}
 
			function ini() {
			document.getElementById("de1").value=parseInt((Math.random()*6+1), 10);
			document.getElementById("de2").value=parseInt((Math.random()*6+1), 10);
			}
			function restart() {
			doc.de1.value=0;
			doc.de2.value=0;
			}
 
			</script>
			<body>
			<form name="doc">
			<input type="button" value="Lancer" onclick="ini()"><br />
			<input img src="des/image1.jpg" name="de1" id="de1" value="" />
			<input img src="des/image2.jpg" name="de2" value="" /><br />
			<input type="button" value="Reset" onclick="restart()" />
			</form>
			</body>
 
			</html>

RomainVALERI · 28/01/2011, 18h32

Citation:

Envoyé par picto8679

je suis vraiment nul, bon je vous remercie tous de m'aider car je vais pouvoir comprendre les fonctions, et progresser. Il y a pas longtemps que je pratique le javascript.

J'ai essayer vos propositions et je n'arrive pas a inserer mes images et mon code est pas correct.

je suis vraiment un vrai novice.....

Si vous pouviez me dire ce qui va pas...

Bah non il ne faut pas être si négatif

Ne t'inquiète pas, ton code n'a rien de déshonorant, il ne fonctionne pas encore, c'est différent

Sache aussi que tu as à ta disposition les tutoriels et la FAQ, à ne pas négliger ^^

Bon alors une autre chose qui, elle non plus, n'est pas grave

regarde cette petite ligne en dessous de ton message de départ :

Citation:

Dernière modification par danielhagnoul ; Hier à 01h23. Motif: Merci d'utiliser la balise [code] (bouton #) de l'editeur.

Quand tu nous montres un extrait de code dans un message, sélectionne-le et clique sur "#" au-dessus de la boite de texte, c'est beaucoup plus lisible pour tout le monde sans qu'un modérateur soit obligé de le corriger à la main en passant.

Citation:

Envoyé par picto8679

Contactez moi par mp si vous souhaitez

A priori c'est mieux pour tout le monde que les échanges se fassent sur le forum : c'est le principe fondateur qui permet de constituer, au fur et à mesure des discussions et des résolutions de problèmes, une énorme base de connaissances ^^ Si on t'aide à résoudre ton problème par MP, le prochain qui aura le même problème que toi va reposer les mêmes questions et retraverser les mêmes étapes de questionnement, essai, erreur, etc.

Alors que si il fait une recherche sur les forums avant de poster*, quel gain de temps pour tout le monde !

Allez, remets-nous en forme le dernier extrait posté et on va s'en sortir

* ce qui donc, fait de lui un être d'exception

NoSmoking · 28/01/2011, 18h35

une pluie de petit détail pèche...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var img1 = document.getElementById('image1.jpg","image2.jpg", "image3.jpg","image4.jpg","image5.jpg","image6.jpg');

la méthode getElementById n'attend qu'un argument, une string, qui représente l'ID d'un élément du document, pas une chaîne qui ne veux pas dire grand chose...
de plus cette méthode cherche un élément qui a une ID, sauf IE qui trouve si un NAME existe, donc

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var de2 = document.getElementById('de2');

te retournera rien attendu que sur cette ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input img src="des/image2.jpg" name="de2" value="" /><br />

il n'y a pas d'ID.

de plus il te faut 2 réceptacles pour tes images, ou sont-ils puisque voir début de ce message...

voila pour un début et profites pour éditer et mettre les balises code

Willpower · 29/01/2011, 17h40

En fait, je pense que ton problème vient du fait que ton 2 et ton 3 ne ressemblent pas à ceux d'un vrai dé.

picto8679 · 30/01/2011, 03h54

Oui merci pour les conseils, par contre je comprends pas mon code doit avoir des defaults puisque il ne marche pas sur internet eplorer et en plus il n'affiche pas les résultats.....
Je seche si vous avez la reponse....

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<html> 
 
<head> 
<title>Lancer de dés</title> 
 
<script language="javascript"> 
function ini() { 
var val1 = parseInt((Math.random()*6+0.5), 10); 
var val2 = parseInt((Math.random()*6+0.5), 10); 
var img1 = document.getElementById('img_de1'); 
var img2 = document.getElementById('img_de2'); 
var somme = 0 ; 
somme = val1 + val2 ; 
 
if(img1 != null && de1 != null){ 
img1.innerHTML = '<img src="./image' + val1 + '.jpg" />'; 
de1.value = val1; 
} 
if(img2 != null && de2 != null){ 
img2.innerHTML = '<img src="./image' + val2 + '.jpg" />'; 
de2.value = val2; 
} 
} 
 
 
</script> 
<body> 
<form name="doc"> 
<input type="button" value="Lancer les dés" onclick="ini()"><br /> 
<div id="img_de1"></div> 
<input img src="des/images1.jpg" Id="de1" value="" /> 
<div id="img_de2"></div> 
<input img src="des/images2.jpg" Id="de2" value="" /><br /> 
<input type="text" value="Le résultat est" id="somme"><br /> 
</form> 
</body> 
 
</html>

Merci d'avance

NoSmoking · 30/01/2011, 12h44

Citation:

il ne marche pas sur internet eplorer

sur les autres navigateurs non plus je présumes

Toujours des petits détails, avec le s cette fois.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
function ini() {
  var val1 = parseInt((Math.random() * 6 + 0.5), 10);
  var val2 = parseInt((Math.random() * 6 + 0.5), 10);
  var img1 = document.getElementById('img_de1');
  var img2 = document.getElementById('img_de2');
  //------------------------------
  // NE PAS OUBLIER de les definir
  //------------------------------
  var de1 = document.getElementById('de1');
  var de2 = document.getElementById('de2');
  var oSomme = document.getElementById('somme');
 
  var somme = 0;
  somme = val1 + val2;
 
  if (img1 != null && de1 != null) {
    img1.innerHTML = '<img src="./image' + val1 + '.jpg" />';
    de1.value = val1;
  }
  if (img2 != null && de2 != null) {
    img2.innerHTML = '<img src="./image' + val2 + '.jpg" />';
    de2.value = val2;
  }
  //-------------------
  // METTRE le resultat
  //-------------------
  oSomme.value = somme;
}

Citation:

Envoyé par Auteur

Insère directement une balise img avec un src pointant vers une image transparente ou de la couleur du fond avant de lancer les dés.
Lorsque la fonction ini() est exécutée on change uniquement le src de la balise.

pourquoi ne pas prendre en compte, cela serait bien plus élégant

Il te restera à régler les valeurs de ton tirage...

RomainVALERI · 30/01/2011, 18h32

Pour obtenir le résultat du dé, tu fais actuellement :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

var val1 = parseInt((Math.random()*6+0.5), 10);

.. cependant il me semble peu probable que ton dé ait une face "0"

Tu as repris mon conseil en ne gardant qu'une partie, ça ne peut pas aller

Fais plutôt :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

var val1 = parseInt((Math.round(Math.random()*6+0.5)), 10);

Comme ça non seulement tu es sûr de n'obtenir que des entiers entre 1 et 6, mais avec une répartition aléatoire équilibrée. ^^

Pour éviter de tout réécrire, et aussi pour simplifier la lecture, quand ce genre de besoin devient plus fréquent sur une page, ça ne fait pas de mal d'en faire une petite fonction du style :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
// FONCTION : simulation de jet de dé
// PARAM #1 : "max" (number) : nombre de "faces"
// RETOUR : entier aléatoire entre 1 et "max"
function de(max) {
   if (max < 1) { return 0; }
   return Math.round((Math.random() * max) + .5);
}

RomainVALERI · 30/01/2011, 18h48

Citation:

Envoyé par RomainVALERI

2) parseInt prend un second paramètre (radix) pour la base de conversion. Comme tout le monde 99% du temps, c'est de la base 10 qu'il te faut. Il est considéré comme une bonne pratique de l'ajouter, pour éviter la conversion implicite en octal dans le cas d'une chaine paramètre commençant par "0".

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("de1").value=parseInt((Math.random()*6+1), 10);

Bon ben ...

Cette remarque, juste par ailleurs, est très inutile ici, désolé

Dans ce cas de figure, le problème n'est pas là : parseInt attend une chaine en paramètre... comme tu lui passes un nombre à la place, il va commencer par le convertir en chaine... puis parser les caractères un par un et il ne pourra pas tomber dans le cas de figure que je décris.
Mais bon, utiliser parseInt ici me semble inapproprié. Math.floor à la limite... ^^

27/01/2011, 09h32	#2
RomainVALERI Expert Confirmé Sénior Romain VALERI POOête Inscription : avril 2008 Messages : 2 572 Détails du profil Informations personnelles : Nom : Romain VALERI Âge : 35 Localisation : France, Meurthe et Moselle (Lorraine) Informations professionnelles : Activité : POOête Informations forums : Inscription : avril 2008 Messages : 2 572 Points : 4 073 Points : 4 073	Entre autres, il y a 3 erreurs ici : Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part doc.de1.value=parseInt(Math.random()6+1); 1) l'accès à ton input ne fonctionnera pas (à moins que tu aies fait une référence sur "document" appelée "doc" ^^). Essaie plutot de leur mettre un id et d'accèder par getElementById : Code html : Sélectionner tout - Visualiser dans une fenêtre à part <input type="button" name="de1" id="de1" value="" /> Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part var de1 = document.getElementById("de1"); 2) parseInt prend un second paramètre (radix) pour la base de conversion. Comme tout le monde 99% du temps, c'est de la base 10 qu'il te faut. Il est considéré comme une bonne pratique de l'ajouter, pour éviter la conversion implicite en octal dans le cas d'une chaine paramètre commençant par "0". Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part document.getElementById("de1").value=parseInt((Math.random()6+1), 10); 3) Tu voulais simuler des dés à 7 faces ou c'est mes yeux ? Code : Sélectionner tout - Visualiser dans une fenêtre à part var de1a6 = Math.round((Math.random() * 6) + 0.5) ... ça devrait aller mieux Mais il y a d'autres problèmes, la liste n'est pas finie... ^^ (le fait que le script soit placé dans le head et s'exécute tout de suite donc les éléments qu'on essaie d'obtenir n'existent pas encore dans le DOM, la variable "nombre" est inutilisée, l'attribut de la balise script est obsolète, etc.) __________________ ...pour les linguistes et les curieux >>> générateur de phrases aléatoires __________________
	00

28/01/2011, 18h35	#7
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 930 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 930 Points : 4 744 Points : 4 744	une pluie de petit détail pèche... Code : Sélectionner tout - Visualiser dans une fenêtre à part var img1 = document.getElementById('image1.jpg","image2.jpg", "image3.jpg","image4.jpg","image5.jpg","image6.jpg'); la méthode getElementById n'attend qu'un argument, une string, qui représente l'ID d'un élément du document, pas une chaîne qui ne veux pas dire grand chose... de plus cette méthode cherche un élément qui a une ID, sauf IE qui trouve si un NAME existe, donc Code : Sélectionner tout - Visualiser dans une fenêtre à part var de2 = document.getElementById('de2'); te retournera rien attendu que sur cette ligne Code : Sélectionner tout - Visualiser dans une fenêtre à part <input img src="des/image2.jpg" name="de2" value="" /><br /> il n'y a pas d'ID. de plus il te faut 2 réceptacles pour tes images, ou sont-ils puisque voir début de ce message... voila pour un début et profites pour éditer et mettre les balises code
	00

29/01/2011, 17h40	#8
Willpower Membre Expert Boris Dessy sans emploi Inscription : décembre 2010 Messages : 847 Détails du profil Informations personnelles : Nom : Boris Dessy Localisation : Belgique Informations professionnelles : Activité : sans emploi Informations forums : Inscription : décembre 2010 Messages : 847 Points : 1 344 Points : 1 344	En fait, je pense que ton problème vient du fait que ton 2 et ton 3 ne ressemblent pas à ceux d'un vrai dé.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email