Question

我想要做的是通过点击我需要更改的数据来更改客户的名称，但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();
}

Answer 1

使用<tr>的ID将不起作用，因为对于所有单元格都是相同的，您需要使用对标签本身的引用。然后，您可以使用nextElementSibling获取标签后的<input>。

function edit(label){
    label.style.display = "none";
    var tekst = label.innerText;

    var inputfelt = label.nextElementSibling;
    inputfelt.style.display = "block";
    inputfelt.value = tekst;
    inputfelt.focus();
}

<table>
  <tr>
    <td><label class="editlabel" onclick="edit(this)">Firstname</label><input type="text" class="edititem" style="display:none"></td>

    <td><label class="editlabel" onclick="edit(this)">Lastname</label><input type="text" class="edititem" style="display:none"></td>
    </td>

    <td><label class="editlabel" onclick="edit(this)">Email</label><input type="text" class="edititem" style="display:none"></td>
    </td>

    <td><label class="editlabel" onclick="edit(this)">Mobile</label><input type="text" class="edititem" style="display:none"></td>
    </td>

    <td><label class="editlabel" onclick="edit(this)">Postal</label><input type="text" class="edititem" style="display:none"></td>
    </td>

    <td><label class="delete" onclick="slett(this.parentElement)"><button>Slett</button></label></td>
  </tr>
</table>

不会让我更改数据，因为标签返回为null

1 个答案: