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 :
<!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 :
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);
}
svp besoin de votre aide !!! merci d'avance
Uncaught TypeError: document.getElementById(...) is null
-
- Messages : 5
- Enregistré le : 22 févr. 2024, 03:18
Re: Uncaught TypeError: document.getElementById(...) is null
Bonjour
Je pense qu'il faut un compteur de lignes pour éviter les mélanges
L'ajout de ligne se fait avec toujours le meme id
`<tr id="idLigne">
Je pense qu'il faut un compteur de lignes pour éviter les mélanges
L'ajout de ligne se fait avec toujours le meme id
`<tr id="idLigne">
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php
https://www.toutjavascript.com/livre/index.php
-
- Messages : 5
- Enregistré le : 22 févr. 2024, 03:18
Re: Uncaught TypeError: document.getElementById(...) is null
Je ne comprend pas très bien stp
![Choqué :shock:](./images/smilies/icon_eek.gif)
![Choqué :shock:](./images/smilies/icon_eek.gif)
![Choqué :shock:](./images/smilies/icon_eek.gif)
![Choqué :shock:](./images/smilies/icon_eek.gif)
Re: Uncaught TypeError: document.getElementById(...) is null
Bonjour,
J'ai ajouté un identifiant à chaque newLigne et corriger l'ajout de ligne à la table. Ca fonctionne bien maintenant :
J'ai ajouté un identifiant à chaque newLigne et corriger l'ajout de ligne à la table. Ca fonctionne bien maintenant :
Code : Tout sélectionner
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My_page_Test</title>
<script>
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");
let tablePrincipale=document.getElementById("tablePrincipale");
console.log(tablePrincipale)
tablePrincipale.insertAdjacentHTML("beforeend", 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(){
/* ID est un identifiant unique pour bien cibler la nouvelle ligne */
let compteur=performance.now();
let idLigne = "idLigne"+compteur;
let NewLigne =
`<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(NewLigne);
}
</script>
</head>
<body>
<table id="tablePrincipale">
<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>
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php
https://www.toutjavascript.com/livre/index.php