Ajout d ' élément via un le JS

Version imprimable

1 pièce(s) jointe(s)

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:

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:

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.
Pièce jointe 649087

11/01/2024, 17h58
unanonyme

Bonjour,

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

Bonne journée.

Salut labarre2002,

Code:

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

11/01/2024, 18h22
labarre2002

1 pièce(s) jointe(s)

merci pour vos méssages

@unanonyme

merci pour la remarque Pièce jointe 649096
11/01/2024, 18h49
NoSmoking
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:

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
11/01/2024, 19h00
labarre2002

@NoSmoking

Bonsoir

je réalise un exercise qui l ' exige .Je viens de comprendre ce qui cause mon probleme.
11/01/2024, 19h24
NoSmoking

Citation:

je réalise un exercise qui l ' exige

:koi: qui exige quoi ????? des erreurs
11/01/2024, 19h29
unanonyme

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:

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

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

Citation:

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.
11/01/2024, 19h37
NoSmoking

Citation:

Envoyé par unanonyme

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

:oops: bien vu ... je ne l'avais pas vu !!!!