0

A table made containing the edit information field a problem to run code undifined code in function please help me to fix this error

"info" id table in html

function submit ()
{
    var table = document.getElementById("info");
    var td1 = document.createElement("td")
    var td2 = document.createElement("td");
    var row = document.createElement("tr");

    td1.innerHTML = document.getElementById("p-name").value;
    td2.innerHTML = document.getElementById("p-id").value;

    row.appendChild(td1);
    row.appendChild(td2);
    table.children[0].appendChild(row);

create button in script

var bedit = document.createElement("BUTTON");
var bename = document.createTextNode("Edit");

bedit.appendChild(bename);
bedit.onclick = function () { edit_row(event) }

td6.appendChild(bedit);}

function code on click button in submit function

function edit_row()
{
    bedit.style.display = "none";
    bsave.style.display = "block";

    var input = document.createElement("INPUT");
    input.setAttribute("type", "text");

    var string = td1.textContent;

    td1.innerHTML = "";
    td1.appendChild(input);

    input.value = string;
}
treyBake
  • 6,440
  • 6
  • 26
  • 57
Dani
  • 47
  • 9

1 Answers1

0

Ok, try this. I added some comments.

function submit () {
var table = document.getElementById("info");
var td1 = document.createElement("td")
var td2 = document.createElement("td");

td1.innerHTML = document.getElementById("p-name").value;
td2.innerHTML = document.getElementById("p-id").value;

// create a table row
var row = document.createElement("tr");

row.appendChild(td1);
row.appendChild(td2);

// instead of your append
// table.children[0].appendChild(row);
// use this append
table.appendChild(row);


var bedit = document.createElement("BUTTON");
var bename = document.createTextNode("Edit");
bedit.appendChild(bename);
bedit.onclick = edit_row.bind(null, bedit, td1);

// createtd6 before because it is not known by your previous code
// I use this td2 instead of td6
td2.appendChild(bedit);
}

function edit_row(bedit, td1) {
bedit.style.display = "none";
// create bsave button before because it is not known by your previous code
// bsave.style.display = "block";
var input = document.createElement("INPUT");
input.setAttribute("type", "text");
var string = td1.textContent;
td1.innerHTML = "";
td1.appendChild(input);
input.value = string;
}

submit();
<table id="info"></table>

<hr/>

<input id="p-name" type="text" value="name_value" />
<input id="p-id" type="text" value="id_value" />