Why is my code returning "undefined" on innerHtml?

Question

I made a listener to attatch an id "selectedRow" to the row a user has clicked on. The intent from there is be able to manipulate the data in that row; Previously i was using content editable however I'm trying to make it more obvious to the user that they are editing a row (this is for a project) so i've created an editing panel to do so. I've however ran in to some problems with a lot of data being returned as undefined when using .innerHTML when sending the TD to the input boxes.

I've tried using .HTML instead

$('tr').click(function() {
    if(document.getElementById("SELECTEDROW")) {
        var oldRow = document.getElementById("SELECTEDROW");
        oldRow.classList.remove("selected");
        $("#SELECTEDROW").removeAttr('id');
    }

    $(this).attr('id', 'SELECTEDROW'); 
    selectedRow = document.getElementById("SELECTEDROW");
    table = selectedRow.parentNode;
    console.log("Row " + selectedRow.childNodes[1].innerHTML + " Selected");
    selectedRow.classList.add("selected");
    editRow();
});


function editRow() {
  var currentTD = selectedRow.childNodes;
  var inputs = document.getElementById("inputs").childNodes;
  var i = 0;
  for (i = 0; i < currentTD.length; i++) {
    inputs[i].innerHTML = currentTD.html;
  }

  console.log('Now Editing:' + currentTD[1].innerHTML);
  document.getElementById("editingPanel").style.display = "block";
  document.getElementById("content").style.height = "49%";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
    <table>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Role</th>
            <th>Address</th>
            <th>Phone</th>
            <th>Email</th>
            <th>Password</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Bill Robbins</td>
            <td>Conductor</td>
            <td>12, Caldrow Ave, Plymouth, Pl21XE</td>
            <td>01921202384</td>
            <td>XxbillyboyxX@bossman.com</td>
            <td>CaTsRbAe1967</td>

        </tr>
        <tr>
            <td>2</td>
            <td>Kat Robbins</td>
            <td>Admin</td>
            <td>12, Caldrow Ave, Plymouth, Pl21XE</td>
            <td>019232042454</td>
            <td>katrobs@gmail.com</td>
            <td>thR33mel0ns</td>

        </tr>
    </table>
</div>

<div id="editingPanel">
    <div id="inputFields">
        <form id="inputs">
            <input id="input1" type="text" name=""/>
            <input id="input2" type="text" name="">
            <input id="input3" type="text" name="">
            <input id="input4" type="text" name="">
            <input id="input5" type="text" name="">
            <input id="input6" type="text" name="">
            <input id="input7" type="text" name="">
            <input id="input8" type="text" name="">
        </form>
    </div>
    <div id="editButtons">                  
            <button onclick="addRow()">New Row</button>
            <button onclick="editRow()">Save Row</button>
            <button onclick="removeRow()">Delete Row</button>
        </div>
</div>

The expected output would be for each td's text to be copied into the input boxes.

Answer 1

You can try this:

$("body").on("click","tr",function(){  //Just in case you are going to use dynamic content, because the click method doesn't work on dynamically created/added elements
    for(let i=0;i<7;i++){
        $("#input"+(i+1)).val($(this).children()[i].innerHTML); //You are using jQuery for a reason, to simplify code, so avoid using unnecessary JS where you can by using simplified jQuery
    }
});

Answer 2

You need to get the children properly. You also need to assign the text to the value property of the input, not its innerHTML

function editRow() {
    // You need to get elements by tag name, not childNodes
    var currentTD = selectedRow.getElementsByTagName("td");
    // You need to get elements by tag name, not childNodes
    var inputs = document.getElementById("inputs").getElementsByTagName("input");
    var i = 0;
    for (i = 0; i < currentTD.length; i++) {
    console.log(inputs[i]);
    console.log(currentTD[i]);
    // set the "Value" of an input box, not its "innerHTML"
    // also you need to apply the [i] to the currentTD because it is a list
    inputs[i].value = currentTD[i].innerHTML;
}