Discussion :

[touit]

Bonjour,

J'essaie d'afficher une variable avec innerHTML, celle ci s'affiche de maniere capricieuse, voici quant elle ne s'affiche pas :

Code :

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

1
2
3
4
5
6
7
8
9
 
 
score = document.getElementById("Aff_score");
score = 0;
nbMultiplicateur = 1;
 
function afficherScore() {
    score.innerHTML = "Score : " + score;
}

Par contre si devant innerHTML je mets le nom de l'ID cela fonctionne (!)

Code :

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

1
2
3
4
5
6
7
8
 
score = document.getElementById("Aff_score");
score = 0;
nbMultiplicateur = 1;
 
function afficherScore() {
    Aff_score.innerHTML = "Score : " + score;
}

Et ce que je ne comprends pas c'est qu'une autre facon de faire fonctionne aussi sans avoir a mettre l'ID direcement devant le InnerHTML .... :/

Code :

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

1
2
3
4
5
6
7
8
9
 
 
$score = document.getElementById("score");
score = 0;
nbMultiplicateur = 1;
 
function afficherScore() {
    $score.innerHTML = "Score : " + score;
}

Comment expliquer ces différences d'affichage ?

[autran]

Ça ne vient pas de ton navigateur, ni du JavaScript qui interpréterait comme ça lui chante.
Le problème est juste au dessus du clavier.... toujours

Tu proposes 3 façons de faire la même chose. Tu fais des erreur dans les 3. Donc quand ça devrait marcher ça ne marche pas. Et quand ça ne devrait pas marcher ça marche

Allez on attaque la première solution que tu proposes, c'est la leçon que tu viens juste de voir : les variables. Et tu vas résoudre ça tout seul.

Combien penses-tu qu'il te faut de variables ?

[Watilin]

Dans ton premier bout de code, tu utilises deux fois la même variable :

Code :

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

1
2
score = document.getElementById("Aff_score");
score = 0;

Ta seconde affectation écrase la première, du coup la variable score contient 0, et a « oublié » qu'elle contenait une référence vers l'élément portant l'id Aff_score juste avant.
En JavaScript, les variables peuvent contenir n'importe quoi ; le point essentiel à retenir c'est qu'elles contiennent quelque chose, elles sont des boîtes en quelques sortes.
Ouvre la console de ton navigateur avec F12, clique sur l'onglet « Console » s'il n'est pas déjà ouvert, et tape ceci dans le champ de commande :

Code :

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

1
2
score = document.getElementById("Aff_score");
typeof score

Tu verras "object". À présent, si tu tapes ceci :

Code :

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

1
2
score = 0;
typeof score

Tu verras "number". À tout moment tu peux vérifier le type de ce que contient ta variable grâce à cet opérateur typeof.


Dans ton deuxième bout de code, il y a un mécanisme caché :

Code :

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

1
2
3
4
5
score = 0;
 
function afficherScore() {
    Aff_score.innerHTML = "Score : " + score;
}

Normalement, la variable Aff_score ne devrait pas être définie. Mais comme il y a dans ta page un élément HTML qui porte cet ID, le navigateur crée automatiquement une variable avec ce nom, et la remplit avec une référence vers l'élément.


Dans ton troisième bout de code, tu as en réalité deux variables, $score et score, qui n'ont rien à voir l'une avec l'autre. En JavaScript, le caractère $ n'a aucune signification particulière et tu peux l'utiliser comme tu veux dans un nom de variable. Tu as donc $score qui contient une référence vers l'élément que tu as obtenu avec document.getElementById, et code qui contient 0.


À lire : pourquoi faut-il toujours déclarer ses variables en JavaScript ?

[touit]

En effet, je venais justement de m'en rendre compte il y a quelques minutes en mettant un nom qui prête moins a confusion a mon ID.
J'aurai du poster moins vite encore
C'est le $score et la variable score qui m'ont un peu perdu.
Sinon est ce que le $ devant un nom de variable est recommandé ? Car j'ai vu que Jquery utilisait le $, du coup je me demande...

[touit]

Ça ne vient pas de ton navigateur, ni du JavaScript qui interpréterait comme ça lui chante.
Le problème est juste au dessus du clavier.... toujours

Tu proposes 3 façons de faire la même chose. Tu fais des erreur dans les 3. Donc quand ça devrait marcher ça ne marche pas. Et quand ça ne devrait pas marcher ça marche

Allez on attaque la première solution que tu proposes, c'est la leçon que tu viens juste de voir : les variables. Et tu vas résoudre ça tout seul.

Combien penses-tu qu'il te faut de variables ?

Je pense qu'il me faut une variable pour contenir le nombre correspondant au score, mais j'ai confondu la variable score et l'objet contenant la balise "score".
Ensuite une variable pour contenir l'objet balise "score". Elles sont toutes deux distinctes.
Si j'ai bien compris


@watilin Merci pour ces très bons conseils, je penserai a me servir de typeof, c'est vrai que ça pouvait être bien pratique dans ce cas ci

[autran]

Donc il te faut 2 variables :

• une pour l’élément du DOM que tu as sélectionné
• l'autre pour la valeur numérique du score

Ce qui donne pour ta première solution :

Code javascript :

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

1
2
3
4
5
function afficherScore() {
	var score = document.getElementById("Aff_score");
        var scoreValue = 0;
	score.innerHTML = "Score : " + scoreValue;
}

[Watilin]

Sinon est ce que le $ devant un nom de variable est recommandé ? Car j'ai vu que Jquery utilisait le $, du coup je me demande...

C'est toi qui vois. jQuery et d'autres frameworks utilisent le symbole $ comme nom de variable car c'est un nom court, ça fait gagner de la place quand on l'utilise souvent, et ça a moins de chances qu'une lettre de l'alphabet, a priori, de rentrer en conflit avec une autre variable. En tout cas je pense que c'est ce qu'ils se sont dit. Peut-être aussi qu'ils ont voulu insister sur le symbole de richesse (dollar), parce que les frameworks sont là pour enrichir les fonctionnalités des navigateurs (théorie foireuse, bonjour ). Pour l'anecdote il y a aussi Underscore qui a préféré utiliser _ (comme son nom l'indique).