Uncaught TypeError: document.getElementById() is null

**PastoFerrari** · 23/02/2024, 02h57

Salut les Geeks j'espère que vous allez bien jai un souci svp je ne comprend pas pourquoi le navigateur ma dit que parseFloat(document.getElementById(idLigne).querySelector(".n1").value); is null

voici le code html :

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My_page_Test</title>
<script src ="Test.js"></script>
</head>
 
<body>
 
 
<table>
<tr id="Ligne1">
<td>n1<input type="text" onkeyup="cal('Ligne1')" size="3" class="n1"/></td>
<td>n2<input type="text" onkeyup="cal('Ligne1')" size="4" class="n2"/></td>
<td>Somme<span id="n1D"><input type="text" size="4" class="somme"/></span></td>
</tr>
 
</table>
 
</body>
<button type="button" onclick="add()" >Add</button>
 
</html>

et voici le javascript :

Code :

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
function cal(idLigne){
 
let n1 = parseFloat(document.getElementById(idLigne).querySelector(".n1").value);
let n2 = parseFloat(document.getElementById(idLigne).querySelector(".n2").value);
let somme = document.getElementById(idLigne).querySelector(".somme").value = (n1+n2);
 
return(somme);
 
}
 
function add(){
let Leprincipal = document.getElementById("n1D");
Leprincipal.insertAdjacentHTML("afterend", NewLigne());
// apllique le fontion cal a toutes lignes
 
let lignes = document.querySelectorAll("tr[id='idLigne']");
lignes.forEach((ligne) => {
let n1Input = ligne.querySelector(".n1");
let n2Input = ligne.querySelector(".n2");
n1Input.addEventListener("input", function() {
cal(ligne.id);
});
n2Input.addEventListener("input", function() {
cal(ligne.id);
});
});
 
}
function NewLigne(){
let NewLign =
`<tr id="idLigne">
<td>n1<input type="text" onkeyup="cal('idLigne')" size="3" class="n1"/></td>
<td>n2<input type="text" onkeyup="cal('idLigne')" size="4" class="n2"/></td>
<td>Somme<input type="text" size="4" class="somme"/></td>
</tr>`;
return(NewLign);
 
}

**Doksuri** · 23/02/2024, 09h37

le HTML est "lu" de haut en bas.. a ce moment, il tombe sur le fichier "test.js" => qu'il execute directement.
ce script fait appel a des elements du DOM ... qui... du coup, n'existent pas encore (d'ou ton erreur)
puis le HTML poursuit la lecture du fichier, et tombe "enfin" sur les elements du DOM a creer/afficher

=> 2 solutions :

1. mettre ton fichier JS a la fin de ton body
2. ajouter l'attribut defer a ton fichier developer.mozilla.org/fr/docs/Web/HTML/Element/script#defer

**NoSmoking** · 23/02/2024, 11h12

Bonjour,

Envoyé par Doksuri

le HTML est "lu" de haut en bas.. a ce moment, il tombe sur le fichier "test.js" => qu'il execute directement.

Le mal est plus profond

Avec le code suivant :

Code :

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

1
2
let Leprincipal = document.getElementById("n1D");
Leprincipal.insertAdjacentHTML("afterend", NewLigne());

... l'élément <tr> est ajouté àprès l'élément <span>, en conséquence cela n'ayant aucun sens seuls les <input> sont ajoutés et non la <tr id="idLigne">.

Ceci étant une ID doit être unique dans la page ce qui ne serait pas le cas si l'ajout se faisait correctement.

On devrait trouver plutôt quelque chose comme en prenant soin de ne pas mettre d'ID qui de toute manière est inutile :

Code :

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

1
2
3
4
function add(){
  const elemDest = document.querySelector("table");
  elemDest.tBodies[0].insertAdjacentHTML("beforeend", NewLigne());
}

... et c'est tout, inutile d'ajouter des événements qui sont déjà ajoutés inline !

Voilà pour un début de correction.

**ASCIIDEFOND** · 23/02/2024, 12h44

Une méthode pour le calcul des champs.

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<body>
 
        <table>
            <tr>
                <td>n1 <input type="text" size="3" class="input-a" /></td>
                <td>n2 <input type="text" size="4" class="input-b" /></td>
                <td>Somme <input type="text" size="4" class="somme" value="0" /></td>
            </tr>
            <tr>
                <td>n1 <input type="text" size="3" class="input-a" /></td>
                <td>n2 <input type="text" size="4" class="input-b" /></td>
                <td>Somme <input type="text" size="4" class="somme" value="0" /></td>
            </tr>
            <tr>
                <td>n1 <input type="text" size="3" class="input-a" /></td>
                <td>n2 <input type="text" size="4" class="input-b" /></td>
                <td>Somme <input type="text" size="4" class="somme" /></td>
            </tr>
 
        </table>
 
 
    <script>
        let inputS = document.querySelectorAll('.input-a, .input-b')
 
        inputS.forEach((inpuSelect) => { //On boucle les balises input class "input-a" & "input-b"
            inpuSelect.addEventListener('keyup', () => {
                let ligneTR = inpuSelect.closest('TR'), // Balise parent -> "<tr>"
                    inputA = parseInt(ligneTR.children[0].children[0].value), // Parent -> <input> class "input-a"
                    inputB = parseInt(ligneTR.children[1].children[0].value), // Parent -> <input> class "input-b"
                    inputResult = ligneTR.children[2].children[0] // Parent -> <input> class "somme"
 
                if (isNaN(inputA)) inputA = '' // Si NaN
                if (isNaN(inputB)) inputB = ''
 
                inputResult.value = inputA + inputB
            })
 
        })
    </script>
</body>

**NoSmoking** · 23/02/2024, 16h45

Une méthode pour le calcul des champs.

tu oublies que la <table> est dynamique donc des lignes sont susceptibles d'être ajoutées.

Une « façon élégante » serait d'utiliser la délégation et là il y aurait également plusieurs méthodes.

**ASCIIDEFOND** · 24/02/2024, 23h20

Envoyé par NoSmoking

tu oublies que la <table> est dynamique donc des lignes sont susceptibles d'être ajoutées...

Oui, effectivement.

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
 
<body>
 
    <table>
        <tr>
            <td>n1 <input type="text" size="4" class="input-A" /></td>
            <td>n2 <input type="text" size="4" class="input-B" /></td>
            <td>Somme <input type="text" size="4" class="somme" value="0" /></td>
        </tr>
        <tr>
            <td>n1 <input type="text" size="4" class="input-A" /></td>
            <td>n2 <input type="text" size="4" class="input-B" /></td>
            <td>Somme <input type="text" size="4" class="somme" value="0" /></td>
        </tr>
        <tr>
            <td>n1 <input type="text" size="4" class="input-A" /></td>
            <td>n2 <input type="text" size="4" class="input-B" /></td>
            <td>Somme <input type="text" size="4" class="somme" /></td>
        </tr>
 
    </table>
 
    <button style="width: 220px; height: 25px;margin: 20px; cursor: pointer;" onclick="ajoutLigne()">Ajouter</button>
 
    <script>
        var table = document.getElementsByTagName('table')[0], nomClass = ["input-A", "input-B", "somme"]
 
        function ajoutLigne() {
            let tr, td, tdText, tdInput, attributs, texteTd = ["n1 ", "n2 ", "Somme "]
 
            for (var i = 0; i < 3; i++) {
                tr = document.createElement('tr')
                for (var ii = 0; ii < 3; ii++) {
                    td = document.createElement('td')
                    tdText = document.createTextNode(texteTd[ii])
                    td.appendChild(tdText)
                    tr.appendChild(td)
 
                    attributs = {
                        type: 'text',
                        class: nomClass[ii],
                        size: '4'
                    }
                    tdInput = document.createElement('input')
 
                    Object.keys(attributs).forEach(attr => {
                        tdInput.setAttribute(attr, attributs[attr]);
                    })
 
                    td.appendChild(tdInput)
                }
                table.appendChild(tr)
            }
        }
 
        table.addEventListener('keyup', (event) => {
            let inputSelect = event.target.closest(`.${nomClass[0]}, .${nomClass[1]}`)
 
            if (!inputSelect) return
 
            let ligneTR = inputSelect.closest('tr'),
                inputs = ['inputA', 'inputB']
 
            for (i = 0; i < 2; i++) {
                inputs[i] = parseInt(ligneTR.children[i].children[0].value)
                if (isNaN(inputs[i])) inputs[i] = ''
            }
 
            ligneTR.children[2].children[0].value = inputs[0] + inputs[1]
        })
 
    </script>
</body>
 
</html>

Uncaught TypeError: document.getElementById() is null

JavaScript

Discussions similaires

Partager

Partager