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

**labarre2002** · 11/01/2024, 19h00

@NoSmoking

Bonsoir

je réalise un exercise qui l ' exige .Je viens de comprendre ce qui cause mon probleme.

**NoSmoking** · 11/01/2024, 19h24

je réalise un exercise qui l ' exige

qui exige quoi ????? des erreurs

**unanonyme** · 11/01/2024, 19h29

Bonjour,

Oui vous avez aussi un problème avec la variable temps,
et la variable span comme le dit ASCIIDEFOND.

Pour la remarque de NoSmoking, elle ne me semble pas justifiée
dans la mesure où le script porte l'attribut defer

Code :

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

<script src="size.js" defer></script>

https://developer.mozilla.org/fr/doc...t/script#defer

Cet attribut booléen permet d'indiquer au navigateur que le script doit être exécuté après l'analyse du document et avant l'évènement DOMContentLoaded.

Normalement, ça doit le faire.

C'est bien dire "J'ai trouvé", c'est mieux de prendre le temps de faire un retour détaillé.
Pour les autres, c'est sympa, pour soi, c'est constructif.
Et puis il y a un bouton résolu.

Bonne journée.