Question 297451 in Html Question posted in
Some basic documentation can be found here.

Html – Add Event Listener is not working, i.e. the thing I want add event listener to do is not happening when I click what I should click

I want to add another row to my table when I click a button, but when I do click the button, nothing happens. I do not know if I am using addeventlistener incorrectly or if it is because of other errors in my javascript.

Here is my code:

HTML

<body>

<p style="text-align: center;"> hello </p>

<div id="Ingredients_Table_Div">
    <table id="ingredients_Table" style="text-align: center">
        <tr>
            <th> ID </th><th>Ingredient Name</th><th>Quantity</th> <th>Delete Row</th>
        </tr>
        <tr>
            <td>1</td> <td><input type="text" name="Ingredient[0][Ingre]"></td> <td><input type="text" name="Ingredient[0][Quantity]" ></td>
            <td><!--<img src="trashcan" class="Delete">--></td>
        </tr>
        <tr id="adding_Row_Ingredients">
           <td>Add Row</td> <td ><span id="add_button_ing">+</span></td>
        </tr>

    </table>
</div>

<script src="ADDRecipe.js"></script>
</body>

Javascript

let addbtn_ing = document.getElementById('add_button_ing');
let addbtn_ing_row = document.getElementById('adding_Row_Ingredients');
let ingredients_Table = document.getElementById('ingredients_Table');


addbtn_ing.addEventListener("click", () => {
    let newRow = document.createElement("tr");
    let rowIndex = ingredients_Table.rows.length - 2;
    let rowID_Display = ingredients_Table.rows.length -1;
    newRow.innerHTML = `
            <td> ${rowID_Display} </td> 
            <td><input type="text" name="Ingredient[${rowIndex}][Ingre]"></td> 
            <td><input type="text" name="Ingredient[${rowIndex}][Quantity]" ></td>
            <td><img src="trash_bin.png" class="Delete" alt="delete"></td>
            `;
    ingredients_Table.insertBefore( newRow, addbtn_ing_row);
})
Tags:

3

Answers


  1. 0

    Look in the console for your error.

    Error: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at HTMLSpanElement.<anonymous> (qaloridayo.js:16:23)"

    Browsers will automatically create a tbody wrapper for your rows if you do not explicitly create one. This is causing problems when you try to insert a new row because addbtn_ing_row is not a child of ingredients_Table.

    Try this markup instead.

    let addbtn_ing = document.getElementById('add_button_ing');
let addbtn_ing_row = document.getElementById('adding_Row_Ingredients');
let ingredients_Table = document.getElementById('ingredients_Table');


addbtn_ing.addEventListener("click", () => {
    let newRow = document.createElement("tr");
    let rowIndex = ingredients_Table.rows.length - 2;
    let rowID_Display = ingredients_Table.rows.length -1;
    newRow.innerHTML = `
            <td> ${rowID_Display} </td> 
            <td><input type="text" name="Ingredient[${rowIndex}][Ingre]"></td> 
            <td><input type="text" name="Ingredient[${rowIndex}][Quantity]" ></td>
            <td><img src="trash_bin.png" class="Delete" alt="delete"></td>
            `;
    ingredients_Table.insertBefore( newRow, addbtn_ing_row);
})
      
<p style="text-align: center;"> hello </p>

<div id="Ingredients_Table_Div">
    <table  style="text-align: center">
      <tbody id="ingredients_Table">
        <tr>
            <th> ID </th><th>Ingredient Name</th><th>Quantity</th> <th>Delete Row</th>
        </tr>
        <tr>
            <td>1</td> <td><input type="text" name="Ingredient[0][Ingre]"></td> <td><input type="text" name="Ingredient[0][Quantity]" ></td>
            <td><!--<img src="trashcan" class="Delete">--></td>
        </tr>
        <tr id="adding_Row_Ingredients">
           <td>Add Row</td> <td ><span id="add_button_ing">+</span></td>
        </tr>
        </tbody>

    </table>
</div>
    Login or Signup to reply.
  2. 0

    HTML tables have a special native way for expansion, like this…

    var Row = ingredients_Table.insertRow(0); // indicate at which position in the brackets


var Cell = Row.insertCell(3);  // indicate at which position in the brackets


Cell.innerHTML = 'test'; // populate the new cell with data

    Try this method instead of inserting HTML.

    Login or Signup to reply.
  3. 0

    as per mdn

    If <tr> elements are specified outside an existing <tbody> element, as direct children of the <table>, these elements will be encapsulated by a separate <tbody> element generated by the browser

    here, ingredients_Table.insertBefore( newRow, addbtn_ing_row); addbtn_ing_row isn’t a child of <table>. It is a child of <tbody> encapsulated automatically by the browser.

    So to make this work select the child of the table instead of the table itself
    i.e:

    let ingredients_Table = document.getElementById('ingredients_Table').lastChild;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search