What's wrong with my Javascript for-loop

Question

Here is the content of my HTML-body:

<body> 
<p id="p1"></p>
<p id="p2"></p>
<table style="width:100%" id="theTable"> 
<thead id="head">
<tr>
    <th>@id</th>
    <th>@author</th>
    <th>@content</th>
</tr>
</thead>
<tbody id="body">
<tr >
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><input type="text"> </td>
</tr>
</tbody>
<tfoot id="foot"></tfoot>
</table>
<button onclick="notMyFunction()">+</button>
<script src="first_js.js"> </script>
</body>

And this is my js-Code:

    function notMyFunction(){
//Access the children of the table
        var x = document.getElementById("theTable").children;   
//Insert a row    
        var z = x[1].insertRow(0); 
//Access the indexes of the rows
        var y = x[1].rows.length-1;    
//The number of the cells in the last row                            
        var l = x[1].rows[y].cells.length;                  
//Test if everything working properly
//This seems to be the case because y++ with everz click and l=3 for ever         
       document.getElementById("p1").innerHTML=y;
        document.getElementById("p2").innerHTML=l;
//create a new <input> for the new-added row
    var newInput = document.createElemet("input");
    newInput.setAttribute('type', 'text');
//This loops seems to be incorrect
    for (var i = 0, m=l; i < m ; i++) {
        x[1].rows[0].insertCell(i);
        x[1].rows[0].cells[i].appendChild(newInput);
    }
    }

It must be a table which rows can be added dynamic. but the createElement-part, making it possible to add new rows with input-cells doesn't work, and I can't understand what is wrong with it.

You have a non-standard for loop there. It only takes 3 params: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — jmargolisvt
– jmargolisvt, Commented Sep 1, 2017 at 19:04
@jmargolisvt He only has 3 parameters. You're allowed to initialize multiple variables in the firs tone. — Barmar
– Barmar, Commented Sep 1, 2017 at 19:06

Barmar · Accepted Answer · 2017-09-01 19:14:55Z

The problem is that you're appending the same <input> element into each cell. appendChild() doesn't make a copy of the element, it simply appends it to the new cell, which means it has to be removed from the previous cell. You need to use document.createElement() in the loop to make a new input.

You also had a typo: createElemet.

Full code:

function notMyFunction() {
  //Access the children of the table
  var x = document.getElementById("theTable").children;
  //Insert a row    
  var z = x[1].insertRow(0);
  //Access the indexes of the rows
  var y = x[1].rows.length - 1;
  //The number of the cells in the last row                            
  var l = x[1].rows[y].cells.length;
  //Test if everything working properly
  //This seems to be the case because y++ with everz click and l=3 for ever         
  document.getElementById("p1").innerHTML = y;
  document.getElementById("p2").innerHTML = l;
  for (var i = 0, m = l; i < m; i++) {
    //create a new <input> for the new-added row
    var newInput = document.createElement("input");
    newInput.setAttribute('type', 'text');
    x[1].rows[0].insertCell(i);
    x[1].rows[0].cells[i].appendChild(newInput);
  }

}

<p id="p1"></p>
<p id="p2"></p>
<table style="width:100%" id="theTable">
  <thead id="head">
    <tr>
      <th>@id</th>
      <th>@author</th>
      <th>@content</th>
    </tr>
  </thead>
  <tbody id="body">
    <tr>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"> </td>
    </tr>
  </tbody>
  <tfoot id="foot"></tfoot>
</table>
<button onclick="notMyFunction()">+</button>

Collectives™ on Stack Overflow

What's wrong with my Javascript for-loop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related