Home 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

Questions

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

byMR

December 3, 2023

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);
})

>Solution :

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>