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)

**domi65** · 10/09/2023, 18h38

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 :

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

document.querySelector('.01')

**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.

Texte ne s'affiche pas

JavaScript

Discussions similaires

Partager

Partager