wont let me change data because label returning as null

Question

what i am trying to do is to change the name of a customer by clicking the data i need to change, but the var label is returning null for some reason, i do not know why can anyone spot why? the error in console says :TypeError cannot read property 'style' of null. when i take my mouse over var label it returns as 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();
}

`\`#${kundeselkey} .editlabel\`` isn't an ID, it's a selector, you should be using `document.querySelector()`. But you have multiple elements that match that selector. — Barmar, May 20 '18 at 05:16
If you want to edit that cell of the table, you need to provide a parameter that's specific than just the row ID. — Barmar, May 20 '18 at 05:19
Maybe `onclick="edit(this)"` and then use DOM traversal methods to find the item in the same cell as the parameter. — Barmar, May 20 '18 at 05:20
ok so i tried to use the querySelector but when i click the first td it edits it and when i click any other td it starts editing the same td. and a question to you @barmar am i suppose to write the edit this way: 'onclick="edit(this)(${kundeselkey}"' i am not sure what i am suppose to write after the (this) — Raahim Khan, May 20 '18 at 19:15

score 0 · Accepted Answer · answered May 20 '18 at 20:59

0

using the ID of the <tr> won't work, since it's the same for all the cells, you need to use a reference to the label itself. You can then use nextElementSibling to get the <input> after the label.

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>

answered May 20 '18 at 20:59

Barmar

741,623
53
500
612

Thank you @Barmar this helped, i just have one last question. if im trying to update it with 'label.update' it says label.update is not a function , you have any clue on why it does that? again thanks for the snippet above it helped alot. – Raahim Khan May 21 '18 at 21:31
`label` is a DOM element. There's no `update()` method of DOM elements, what are you expecting that to do? – Barmar May 21 '18 at 21:38
i just need to submit the changes done to the label, i even tried inputfelt.update but it didnt work either so then i tried `inputfelt.onchange = function(){ label.update( {tekst: inputfelt.value} )` – Raahim Khan May 21 '18 at 22:22
`label.textContent = inputfelt.value;` – Barmar May 21 '18 at 23:44
Any reason you're not just using a `contenteditable` span? It seems like you're just reimplementing what that does. – Barmar May 21 '18 at 23:45
1. i did not know of this 2. my teacher is very bad at teaching and i have to watch everything on youtube to learn. 3. i dont know if it ist useable for firebase aswell, will it change data in a database? if so then im using it and many thanks to you" – Raahim Khan May 22 '18 at 03:10
See https://stackoverflow.com/questions/6247702/using-html5-how-do-i-use-contenteditable-fields-in-a-form-submission?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa for how to get the editing result into a form field. – Barmar May 22 '18 at 15:01

wont let me change data because label returning as null

1 Answers1