Partage
  • Partager sur Facebook
  • Partager sur Twitter

[JS] Système d’expérience et de niveau

Problème dans le code

Sujet résolu
12 juin 2018 à 12:32:09

Bonjour, déjà je tiens à préciser que c'est mon premier topic et que je ne connais pas bien JS, j’espère que ça ira ;)

Dans mon code HTML5 & JavaScript :

<!doctype html>

<html>

<head>

<title>XP</title>

</head>

<body>

<script type="text/javascript">

var xp = 0; //variable xp = 0

function miner() {

/*on insère les calculs dans la fonction "miner" puis on execute "math.random(3-20)" pour générer un nombre random entre 3 & 20 puis on le divise par 20*/

var randomGold = math.floor(math.random(3-20));

var randomGoldXp = math.floor(randomGold*20);

xp += randomGoldXp; /*on stocke le résultat dans la variable xp*/

document.getElementById(xp).innerHTML = xp; /*

puis on l'affiche dans le DIV "xp"

*/

</script><input type="button" onclick="miner()" value="CLIQUE" /><div id="xp"></div>

</body>

</html>


quand je clique sur le bouton, il ne m'affiche rien :(  

Mon idée était qu'il affiche un nombre random compris entre 3 & 20 et divisé par 20 mais il n'affiche rien.

J’espère avoir été assez clair ;)

Merci d'avance, Majoras16Forever


-
Edité par Majoras16Forever 12 juin 2018 à 20:35:50

  • Partager sur Facebook
  • Partager sur Twitter
12 juin 2018 à 21:28:07

Bonjour,

Je pense que tu as oublier les double quotes dans

document.getElementById("xp").innerHTML = xp; 



  • Partager sur Facebook
  • Partager sur Twitter

Call me Spaceman

13 juin 2018 à 7:33:46

Merci, je vais tester ça !

EDIT : ça ne change rien :( mais je me demande si je ne me suis pas trompé à  "var randomGold = math.floor(math.random(3-20));" & " var  randomGoldXp = math.floor(randomGold*20);"

-
Edité par Majoras16Forever 13 juin 2018 à 8:10:40

  • Partager sur Facebook
  • Partager sur Twitter
13 juin 2018 à 7:56:26

J'ai déja vue ton pseudo ici en tout cas et je crois que déja tu ne mettais pas en forme ton message, utilise la mise en forme de code, ca donne zero envie d'aider la..
  • Partager sur Facebook
  • Partager sur Twitter
13 juin 2018 à 7:58:42

En effet tu doit te tromper dans les fonctions, tu peux regarder pour math.random et math.floor

  • Partager sur Facebook
  • Partager sur Twitter

Call me Spaceman

13 juin 2018 à 8:06:58

@Majoras16Forever, voici un JSFiddle montrant ton script qui fonctionne : https://jsfiddle.net/ck3ob29m/3/

Quelques erreurs de ta part :

- Tu appelais la librairie mathématique avec "math" au lieu de "Math"

- Ton calcul pour déterminer un nombre aléatoire entre un nombre minimum et maximum n'était pas bon

- Ton insertion du résultat dans le bloc "xp" ne fonctionnait pas car tu avais oublié de mettre des apostrophes autour de l'ID "xp" dans l'appel de "getElementById()".

J'ai aussi déclaré l’événement du clique sur le bouton "CLIQUE" directement dans le javascript à la suite de la déclaration de la fonction "miner()"

Un petit conseils par rapport au développement de script JS de façon générale. Essayes d'utiliser la console développeur de ton navigateur afin de voir les erreurs potentielles. 

Ensuite quand tu poste du code sur le forum, utilises la mise en forme adéquat afin que ce soit plus agréable à lire ;)

-
Edité par BoNux 13 juin 2018 à 8:09:33

  • Partager sur Facebook
  • Partager sur Twitter
13 juin 2018 à 8:13:28

J'aimerais mais je sais pas comment on fait quand on poste/édit un message pour m’en mettre en <code> !

BoNux & NeiSensEight merci beaucoup ( JSFiddle bug sur mon mobile :( si tu pouvais mettre le code s’il-te-plaît) 

PaulTanné je ne sais pas faire la mise en forme, sinon je le ferais ;)

En tout cas merci à tous !

-
Edité par Majoras16Forever 13 juin 2018 à 9:11:57

  • Partager sur Facebook
  • Partager sur Twitter
13 juin 2018 à 8:21:02

et fais attention , tu dis que tu divise ton Xp alors que tu la multiplie, si tu la divise ca te donnera toujours un resulat d'xp a zero

-
Edité par PaulTanné 13 juin 2018 à 8:21:57

  • Partager sur Facebook
  • Partager sur Twitter
13 juin 2018 à 8:28:59

@PaulTanné , j'ai vu aussi cette incohérence, soit @Majoras16Forever c'est embrouillé dans son explication, soit en effet l'algorithme est à revoir :)

Partie HTML

<input type="button" id="miner_btn" value="CLIQUE" /><div id="xp"></div>


Partie JS

var xp = 0; //variable xp = 0

function miner() {

/*on insère les calculs dans la fonction "miner" puis on execute "math.random(3-20)" pour générer un nombre random entre 3 & 20 puis on le divise par 20*/

var min = 3; // On détermine la borne minimum
var max = 20; // On détermine la borne max

var randomGold = Math.floor(Math.random() * (max - min)) + min; // On calcule un nombre aléatoire en "min" et "max"

var randomGoldXp = Math.floor(randomGold*20);

xp += randomGoldXp; /*on stocke le résultat dans la variable xp*/

document.getElementById('xp').innerHTML = xp; /*

puis on l'affiche dans le DIV "xp"

*/

} 

document.getElementById('miner_btn').onclick = miner;



-
Edité par BoNux 13 juin 2018 à 8:29:09

  • Partager sur Facebook
  • Partager sur Twitter
16 juin 2018 à 10:23:12

Désolé du retard, je croyais déjà avoir répondu ;)

Ton script ne marchait pas mais j'ai ajouté le onClick dans le bouton et c’est OK:) Merci beaucoup à tous !

P.-S. : efectivement je me suis trompé dans l’explecation :)

Encore merci beaucoup à tous !

-
Edité par Majoras16Forever 16 juin 2018 à 10:23:50

  • Partager sur Facebook
  • Partager sur Twitter
16 juin 2018 à 15:53:17

Le script fonctionne bien avec ma méthode :)

C'est juste qu'a mon avis tu appel ton script dans le head de ton site et donc forcément à l'instant T où le script est analyser, tes noeuds HTML ne sont pas encore connues.
Pour cela il faut executer le script après le chargement de ta page (onload par exemple) ou bien d'ajouter tous les scripts Javascript en bas de page juste avant la fermeture de ta balise body ;)
  • Partager sur Facebook
  • Partager sur Twitter
16 juin 2018 à 18:03:31

AH oui, c'est fortement possible ;)

En tout cas merci car j’apprends le JavaScript en ce moment en vous m'avez aidé !

  • Partager sur Facebook
  • Partager sur Twitter