Texte ne s'affiche pas

Version imprimable

Bonjour,
pourquoi mon texte ne s'affiche pas ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="javascript01.js"></script>
<body>
    <div class="00">"zero"</div>
    <div class="01">"un"</div>
    <div class="02">"deux"</div>
</body>
</html>

et le Javascript est :

Code:

document.getElementsByClassName('01').innerText = "Hello World";

merci.

02/09/2023, 10h14
Archimède

Bonjour, c'est l'erreur classique => document.getElementsByClassName renvoie un objet de type tableau de tous les éléments enfants qui ont tous les noms de classe donnés !
donc :

Code:

document.getElementsByClassName('01')[0].innerText = "Hello World";
02/09/2023, 12h06
NoSmoking

Bonjour,
autre point en plus, le script s’exécute avant que l'élément ne soit présent dans le DOM, cela entraine une erreur à regarder dans la console (F12)
10/09/2023, 17h38
domi65

Citation:

Envoyé par Archimède

document.getElementsByClassName renvoie un objet de type tableau

Oui, et dans le cas où l'on n'a qu'un seul élément à afficher, autant utiliser

Code:

document.querySelector('.01')
29/09/2023, 10h54
sylvain257

Citation:

Envoyé par NoSmoking

Bonjour,
autre point en plus, le script s’exécute avant que l'élément ne soit présent dans le DOM, cela entraîne une erreur à regarder dans la console (F12)

du coup, on peut mettre un

Code:

document.addEventListener("DOMContentLoaded")

pour qu'il exécute ton code une fois que le DOM est chargé.

Bonne journée
02/10/2023, 08h50
SpaceFrog

Je ne sais pas si c'est toujours d'actualité, mais à une certaine époque il était fortement déconseillé d'utiliser des id et nom de classe uniquement numériques.
02/10/2023, 11h32
NoSmoking

Citation:

Envoyé par domi65

document.querySelector('.01')

Cela va planter alors que document.getElementsByClassName("01") non!

C'est possible mais en écrivant :

Code:

document.querySelector(".\\30 1")

donc vraiment chi..t !
Bon on peut quand même le retrouver facilement en utilisant CSS.escape("01").

Citation:

Envoyé par SpaceFrog

Je ne sais pas si c'est toujours d'actualité,

toujours ...

Citation:

Envoyé par https://www.w3.org/TR/CSS2/syndata.html#characters

En CSS, les identificateurs (y compris les noms d'éléments, les classes et les ID dans les sélecteurs) ne peuvent contenir que
les caractères [a-zA-Z0-9] et les caractères ISO 10646 U+00A0 et plus, plus le trait d'union (-) et le trait de soulignement (_) ;
ils ne peuvent pas commencer par un chiffre, deux traits d'union ou un trait d'union suivi d'un chiffre.

https://www.developpez.com/template/kit/kitinfo.png Quoiqu'il arrive une ID devrait être représentative de ce qu'elle désigne.