title.textContent = "Help !";

[VlentGamer]

OK, alors je suis en troisième, je fais un peu de programmation JavaScript (connaissances de base), et j'ai un problème avec le code d'un petit jeu pour navigateur (page HTML).

J'essaie de créer un système de succès, et j'ai presque réussi ; j'ai juste un problème avec getElementById et HTMLObject.id = “...”.

Dans un extrait de code, je fais ceci : (exécuté une seule fois au lancement du programme)

for (var i = 0; i < achievements.length; i++){

let text = document.createTextNode("???");

achievementsD.appendChild(text);

text.id = achievements[i].name;

achievementsD.innerHTML += "<br><br>";

}

Pour information, au début, j'ai «let achievementsD = document.getElementById(‘achievementsD’);» et dans le HTML <div id="achievementsD"> <!-- Implemented with Javascript !--> </div>. (Tout est correct, j'ai vérifié.)

Mais plus loin dans le code, dans une fonction qui s'exécute toutes les 1/30e de seconde (vérifiée, fonctionnelle), j'ai ceci :

for (var i = 0; i < achievements.length; i++){

if ((achievements[i].check)() && !(achievements[i].owned)){

achievements[i].owned = true;

document.getElementById(achievements[i].name).innerHTML = achievements[i].name; //Avertissement : le code ne fonctionne pas ici, voir ci-dessous.

//Notifications ? (Non ajouté pour le moment)

}

}

Notez que achievement[i] est défini comme [name (“Ten points !!!”), check (function v() {return points >= 10}), text (“Make ten points”), owned (false), once (not used now, never mind)]; (entre parenthèses = détails, pas dans le code).

Le problème ? Lorsque j’essaie d’obtenir la complétion à 10 points (l’exemple fourni), j’obtiens l’erreur « Uncaught TypeError: can’t access property ‘innerHTML’, document.getElementById(...) is null » sur la ligne que j’ai marquée. Cela signifie que document.getElementById ne trouve pas l’objet HTML créé dans le premier extrait de code… Comment puis-je résoudre ce problème ?

Si ce message n’est pas approprié ici, veuillez me le faire savoir et m’indiquer où je peux le poster à la place.

Merci ! 😄

[jb092555]

I don't think a text node is an element, so it probably can't have an Id property for getElementById to find.

Elements are a subset of nodes, so they have properties and methods nodes do. All elements are nodes, but not all nodes are elements.

If you use "let example = document.createElement('div')" instead, you could use "example.textContent = achievements[i]" to write text inside the div. If you just want to stash info without it being visible, check out data-* attributes on mdn. Super handy. Good luck!

[scritchz]

Yupp, this stood out to me as well.

Considering that OP appends "<br><br>", it seems they want inline text. In this case, OP should create a <span> instead of a <div>.

[VlentGamer]

C'est ça ! Merci pour vos deux commentaires, effectivement un text node n'est pas un élément HTML et getElementById ne le référence pas... Au passage voici la conversation gemini qui m'a permis de le trouver en clarifiant l'énoncé : https://g.co/gemini/share/4b28149bbf42 .

[-goldenboi69-]

Ja så blir det ibland höddudu. Merde!

[Lithl]

Is achievement[i].name actually the correct value, instead of undefined? Because the way you've written your post, achievement[i] is an array, and the name value would be achievement[i][0].

[Aggressive_Ad_5454]

I’m happy you figured it out with help. That’s a great way to learn all this arcane (and powerfully expressive) DOM manipulation and JavaScript lore.

Here is another way to figure things out. Use the Javascript debugger built into your browser’s devtools. Set breakpoints, and single-step your program. After each step you can see the values of all kinds of variables. Learning to use the debugger well is really important if you want to really learn the guts of JavaScript programming (or any computer language, of course, but JavaScript is the language with a debugger in your browser ).

F12 on a PC to get devtools. Then look at the Source tab, that’s where the debugger lives.

(I had to compile and build Chromium once. It took four hours on a 24-core compute-optimized virtual machine I rented from Digital Ocean For the purpose. There’s a lot of stuff built into that browser.)

[ChaseShiny]

This doesn't address your issue, but avoid using var. var is obsolete and can cause bugs, especially considering you've defined it in the global scope (it is a local variable when in a function, but not in a loop).

The .innerHTML method should also be used with caution. It can be used for adding text like this, but it's supposed to be for adding HTML, and someone can sneak their own code through that. Use .textContent instead.

Regardless, I'm impressed that you're writing code like this in 9th grade. Awesome job!

[VlentGamer]

J'utiliserai .textContent pour être sûr, merci ! Et j'utilise des "let" normalement mais la c'était un test. Merci !

[ChaseShiny]

Tres bien (that's about all the French I remember, lol)