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

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** · 30/01/2011, 18h48

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... ^^

Programmation javascript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager