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