Uncaught TypeError: document.getElementById() is null

Version imprimable

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:

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:

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);
 
}

23/02/2024, 09h37
Doksuri

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
23/02/2024, 11h12
NoSmoking
Bonjour,

Citation:

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.

:nono: Le mal est plus profond ;)

Avec le code suivant :
Code:

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:

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.

Une méthode pour le calcul des champs.

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

23/02/2024, 16h45
NoSmoking

Citation:

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.

Citation:

Envoyé par NoSmoking

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

Oui, effectivement.

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