Ajout d ' élément via un le JS

**labarre2002** · 11/01/2024, 15h40

Bonjour

Je réalise une page web qui doit afficher l heure la taille de l’écran la taille intérieure ,extérieur
et enfin la taille du document

mon code:

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
15
16
17
18
19
20
21
22
23
24
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Size Checker</title>
    <script src="size.js" defer></script>
</head>
 
<body>
 
 
        <h1>Size Checker</h1>
 
    <time datetime="4:57:55 p.m"></time>
<ul>
<li class="screen">Screen:</li>
<li class="outer">Window Outer:</li>
<li class="inner">Window Inner:</li>
<li class="doc">Document:</li>
</ul>
</body>
</html>

ci dessous mon code js:

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const temps=document.querySelector('time').datetime;
let actuel=new Date() .toLocaleString();
temps.innerHTML=actuel;
 
const screen=document.querySelector('.screen');
const outer=document.querySelector('.outer');
const inner=document.querySelector('.inner');
const doc=document.querySelector('.doc');
 
const valeur=document.createElement("span");
screen.appendChild(span);
valeur.textContent="iuyfvkdjhjlf"
 
console.log(screen);

le soucis est j'essaye d'ajouter des balises span dans mon code en vain.

Puis je avoir une explication ?

Merci.
Nom : z.jpg
Affichages : 111
Taille : 43,0 Ko

**unanonyme** · 11/01/2024, 17h58

Bonjour,

vous avez ouvert l'inspecteur dom et non la console javascript.

Bonne journée.

**ASCIIDEFOND** · 11/01/2024, 18h02

Salut labarre2002,

Code javascript :

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

1
2
const valeur=document.createElement("span");
screen.appendChild(valeur) //à la place de screen.appendChild(span)

**labarre2002** · 11/01/2024, 18h22

merci pour vos méssages

@unanonyme

merci pour la remarque Nom : console.jpg
Affichages : 81
Taille : 36,0 Ko

**NoSmoking** · 11/01/2024, 18h49

Bonjour,
c'est un grnad classique, tu cherches à utiliser les éléments avant qu'ils n'existent, qu'ils soient dans le DOM.

Met ton script en fin de page ou englobe ton script dans un :

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

1
2
3
document.addEventListener("DOMContentLoaded", function() { // ton code ici });

Nota : il restera des erreurs comme celle signalée par ASCIIDEFOND par exemple.

[EDIT] cela ne s'applique pas dans ce cas, voir remarque post #8