Javascript 不允许我更改数据，因为标签返回为null

我想做的是通过单击需要更改的数据来更改客户的名称，但是由于某种原因，var标签返回null，我不知道为什么有人能发现原因？控制台中的错误显示：TypeError无法读取null的属性“style”。 当我将鼠标移到var标签上时，它返回为null

function hentkundesel(snapshot){
    var kundeselkey = snapshot.key;
    var kundeselinfo = snapshot.val();

    inpkunde.innerHTML += `
     <option value="${kundeselkey}">${kundeselinfo.Fornavn} ${kundeselinfo.Etternavn}</option>
    `

    txttabell.innerHTML += `
     <tr id="${kundeselkey}">
     <td><label class="editlabel" onclick="edit('${kundeselkey}')">${kundeselinfo.Fornavn}</label><input type="text" class="edititem" style="display:none"></td>

     <td><label class="editlabel" onclick="edit('${kundeselkey}')">${kundeselinfo.Etternavn}</label><input type="text" class="edititem" style="display:none"></td></td>

     <td><label class="editlabel" onclick="edit('${kundeselkey}')">${kundeselinfo.Adresse}</label><input type="text" class="edititem" style="display:none"></td></td>

     <td><label class="editlabel" onclick="edit('${kundeselkey}')">${kundeselinfo.Mobil}</label><input type="text" class="edititem" style="display:none"></td></td>

     <td><label class="editlabel" onclick="edit('${kundeselkey}')">${kundeselinfo.Poststed}</label><input type="text" class="edititem" style="display:none"></td></td>

     <td><label class="delete" onclick="slett('${kundeselkey}')"><button>Slett</button></label></td>
     </tr>
    `
}


 function edit(kundeselkey){
    var rediger = kunde.child(kundeselkey);
    var label = document.getElementById(`#${kundeselkey} .editlabel`);
    label.style.display = "none";
    var tekst = label.innerText;

    var inputfelt = document.getElementById(`#${kundeselkey} .edititem`);
    inputfelt.style.display = "block";
    inputfelt.value = tekst;
    inputfelt.focus();
}

功能hentkundesel（快照）{
var kundeselkey=snapshot.key；
var kundeselinfo=snapshot.val（）；
inpkunde.innerHTML+=`
${kundeselinfo.Fornavn}${kundeselinfo.Etternavn}
`
txttabell.innerHTML+=`
${kundeselinfo.Fornavn}
${kundeselinfo.Etternavn}
${kundeselinfo.Adresse}
${kundeselinfo.Mobil}
${kundeselinfo.Poststed}
斯莱特
`
}
功能编辑（kundeselkey）{
var rediger=kunde.child（kundeselkey）；
var label=document.getElementById（`${kundeselkey}.editlabel`）；
label.style.display=“无”；
var-tekst=label.innerText；
var-inputfelt=document.getElementById（`${kundeselkey}.edititem`）；
inputfelt.style.display=“块”；
InputFeel.value=tekst；
inputfelt.focus（）；
}

使用

的ID不起作用，因为它对所有单元格都是一样的，所以需要使用标签本身的引用。然后，您可以使用

nextElementSibling

获取标签后面的

功能编辑（标签）{
label.style.display=“无”；
var-tekst=label.innerText；
var inputfelt=label.nextElementSibling；
inputfelt.style.display=“块”；
InputFeel.value=tekst；
inputfelt.focus（）；
}

名字
姓氏
电子邮件
可移动的
邮政的
斯莱特

`${kundeselkey}.editlabel`

不是ID，而是选择器，您应该使用

document.querySelector（）

。但是有多个元素与该选择器匹配。如果要编辑表的该单元格，则需要提供一个特定于行ID的参数。可以

onclick=“edit（this）”

然后使用DOM遍历方法在与参数相同的单元格中查找项。另外，JavaScript中的反勾号可以吗？可以，所以我尝试使用querySelector，但当我单击第一个td时，它会编辑它，当我单击任何其他td时，它会开始编辑相同的td。还有一个问题是@barmar，我是否应该这样写编辑：'onclick=“edit（this）（${kundeselkey}”）我不确定在（this）之后我应该写什么谢谢@Barmar这很有帮助，我只有最后一个问题。如果我试图用“label.update”来更新它，它说label.update不是一个函数，你知道它为什么会这样做吗？再次感谢上面的代码片段对我很有帮助。

label

是一个DOM元素。没有

update（）

DOM元素的方法，您希望它做什么？我只需要提交对标签所做的更改，我甚至尝试了inputfelt.update，但它也不起作用，所以我尝试了

inputfelt.onchange=function（）{label.update（{tekst:inputfelt.value}）

label.textContent=inputfelt.value；

您不只是在使用

contenteditable

span的原因是什么？看起来您只是在重新实现它的功能。