how to edit all the td's on tbody

Question

so what im trying to do is to add the "change" functionality in my code, it works for only the first td but not any other, when i click the other td it automaticly edits the first one. does anyone know why my code is only changing the td>name/td> and not the td>adress/td> or any other td>

html:

 <form id="registrering">
    <label>Navn: <input id="inpnavn" placeholder="Raahim Khan" type="text" required></label>
    <label>Adresse: <input id="inpadresse" type="text" placeholder="Adresse 12" required></label>
    <label>Mobilnummer: <input id="inpmobilnummer" placeholder="12345678" required></select></label>
    <label>Kjønn: 
      <select id="inpkjønn" required>
        <option value="" selected disabled hidden>Velg kjønn</option>
        <option>Mann</option>
        <option>Kvinne</option>
        <option>intetkjønn</option>
      </select>
    </label>
    <button type="submit">Send inn</button>
 </form>

 //showing the data on website


    function hentruss(snapshot){
        var pk = snapshot.key;
        var nyruss = snapshot.val();
        var russref = database.ref("russ/" + nyruss.russ);
        russref.on("value", function(snapshotruss){
            var russobj = snapshotruss.val();
            txttabell.innerHTML += `
                <tr id="${pk}">
                    <td><label class="russlabel" onclick="edit('${pk}')">${nyruss.navn}</label><input type="text" class="editItem" style="display:none"></td>
                    <td><label class="russlabel" onclick="edit('${pk}')">${nyruss.adresse}</label><input type="text" class="editItem" style="display:none"></td>
                    <td>${nyruss.mobilnummer}</td>
                    <td>${nyruss.kjønn}</td>
                    <td><label class="delete" onclick="slett('${pk}')"><button>Slett</button></label></td>
                </tr>
            `;

        });
    }

//update the name,adress etc by clicking the element.

      function edit(pk) {
        var russen = russ.child(pk);


        var label = document.querySelector(`#${pk} .russlabel`);
        label.style.display = "none";
        var tekst = label.innerText;

        var inputfelt = document.querySelector(`#${pk} .editItem`);
        inputfelt.style.display = "block";
        inputfelt.value = tekst;
        inputfelt.focus();

        inputfelt.onblur = function() {
            inputfelt.style.display = "none";
            label.style.display = "block";
        };

        inputfelt.onchange = function() {
            russen.update(  {tekst: inputfelt.value}  )
            inputfelt.style.display = "none";
            label.style.display = "block"; 
            label.innerText = inputfelt.value;
        };

    }

Answer 1

It's a little hard to give an exact solution as the code snippets you have shared have a lot of calls to function whose context is not clear.. I have done my best to illustrate how you can do what you are trying to.. Maybe this will help get started in the right direction:

function handleSubmit(form) {
  // Simulate creation of item using a form
  var name = form.name.value;
  var mobile = form.mobile.value;
  // Generate random pk for demonstration
  var pk = `pk${+new Date()}`;
  var tableBody = document.querySelector('table tbody');
  tableBody.innerHTML += ` <tr>
      <td>
        <label class="russlabel" onclick="edit(this)" data-pk="1" data-field="name">${name}</label>
        <input class="editItem" style="display:none;" />
      </td>
      <td>
        <label class="russlabel" onclick="edit(this)" data-pk="1" data-field="mobile">${mobile}</label>
        <input class="editItem" style="display:none;" />
      </td>
    </tr>`;

  return false;
}

function edit(label) {
  var pk = label.dataset.pk;
  var field = label.dataset.field;
  var input = label.parentElement.children[1]; // Use label.parent.querySelector('input') if DOM is more complex
  label.style = 'display:none;';
  input.style = 'disply:block;';
  input.focus();
  input.value = label.innerHTML;
  input.onchange = function() {
    // pk and field are available here
    // to Update DB state?? not sure how this code works
    //var russen = russ.child(pk);
    //russen.update(  {tekst: inputfelt.value}  )
  }
  input.onblur = function() {
    label.innerHTML = input.value;
    label.style = 'display:block;';
    input.style = 'display:none;';
  }

}

td {
  padding: 0.5rem 0;
  border-bottom: 1px solid black;
}

form {
  margin: 1rem auto;
}

<form id="entry" onsubmit="return handleSubmit(this);">
  <input name="name" placeholder="Name" />
  <input name="mobile" placeholder="mobile" />
  <input type="submit" value="Add Entry" />
</form>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Mobile</th>
  </thead>
  <tbody>
    <tr>
      <td>
        <label class="russlabel" onclick="edit(this)" data-pk="1" data-field="name">Tom</label>
        <input class="editItem" style="display:none;" />
      </td>
      <td>
        <label class="russlabel" onclick="edit(this)" data-pk="1" data-field="mobile">1234</label>
        <input class="editItem" style="display:none;" />
      </td>
    </tr>
  </tbody>
</table>

Some notes:

1. It may be a good idea to read up on/ brush up on JS Events Here and refactor out the in line event handlers - these make your code hard to maintain, read, reason about, debug and are generally a bad idea.

2. Same goes for inline styles - avoid them. Try using classes with supporting styles in a stylesheet instead. (For example, on clicking a label, we could add an active class to the td element which in turn automatically hides the label and shows the input.

3. It's bad practice to reassign listeners to the inputs each time the label is clicked. The same functionality can be handled in a simpler and more graceful manner by using something like Event Delegation