Uncaught TypeError: document.getElementById(...) is null

PastoFerrari · Message par **PastoFerrari** » 23 févr. 2024, 02:54

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

Message par **webmaster** » 24 févr. 2024, 21:45

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

PastoFerrari · Message par **PastoFerrari** » 25 févr. 2024, 19:24

Je ne comprend pas très bien stp

Message par **webmaster** » 26 févr. 2024, 16:23

Bonjour,

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>

Forums Tout JavaScript

Uncaught TypeError: document.getElementById(...) is null

Uncaught TypeError: document.getElementById(...) is null

Re: Uncaught TypeError: document.getElementById(...) is null

Re: Uncaught TypeError: document.getElementById(...) is null

Re: Uncaught TypeError: document.getElementById(...) is null