Texte ne s'affiche pas

**tete2012** · 01/09/2023, 13h28

Bonjour,
pourquoi mon texte ne s'affiche pas ?

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
<!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 :

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

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

merci.

**Archimède** · 02/09/2023, 11h14

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 javascript :

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

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

**NoSmoking** · 02/09/2023, 13h06

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)

**sylvain257** · 29/09/2023, 11h54

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 :

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

 document.addEventListener("DOMContentLoaded")

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

Bonne journée

**SpaceFrog** · 02/10/2023, 09h50

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.

**NoSmoking** · 02/10/2023, 12h32

Envoyé par domi65

document.querySelector('.01')

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

C'est possible mais en écrivant :

Code :

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

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

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

Envoyé par SpaceFrog

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

toujours ...

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.

Quoiqu'il arrive une ID devrait être représentative de ce qu'elle désigne.