How to add a Button using javascript programetically

Question

When i insert a Button into cell5 button i can't click on button. How can i add a button in cell5 so it work properly.

function addOrder()
    {

            var book = $("#book_id").val();

            var qty = $("#qty").val();

            var price = $("#unit_price").val();

            var total = $("#dts_total_price").val();

            var table=document.getElementById("results");
            var row=table.insertRow(-1);
            var cell1=row.insertCell(0);
            var cell2=row.insertCell(1);
            var cell3=row.insertCell(2);
            var cell4=row.insertCell(3);
            var cell5=row.insertCell(4);
            cell1.innerHTML=book;
            cell2.innerHTML=qty;
            cell3.innerHTML=price;
            cell4.innerHTML=total;
            cell5=document.createElement("BUTTON").innerHTML="Edit";
    }

and here is my table which row generated dynamically.

Product Name Quantity Unit Price Total Price Edit

I would suggest looking at this question https://stackoverflow.com/questions/7707074/creating-dynamic-button-with-click-event-in-javascript — Sir Catzilla, May 20 '19 at 10:04
Possible duplicate of [Creating Dynamic button with click event in JavaScript](https://stackoverflow.com/questions/7707074/creating-dynamic-button-with-click-event-in-javascript) — Sir Catzilla, May 20 '19 at 10:06

score 1 · Accepted Answer · answered May 20 '19 at 10:11

1

Try to use on Click event handler in jquery https://api.jquery.com/on/#on-events-selector-data-handler

$("Button").on("click", function(e) {
  console.log(e)

})

answered May 20 '19 at 10:11

Mangesh

365
2
8

Rob Monhemius · Answer 2 · 2019-05-20T10:45:44.017

It is not completely clear in your question. But I think you tried to add event-listeners to your button before the button existed. You need to do this after or during creation of the button.

PS: Note that you can also pass a named function instead of an anonymous one.

let buttonContainer = document.getElementById('button-container');
let button = document.createElement('button');
    button.innerText = 'My Button';
    button.addEventListener( 'click', () => {
      alert('I was clicked');
    });
buttonContainer.appendChild( button );

#button-container{
  background: yellow;
}

<div id='button-container'></div>

PS: If you want the button inside the cell, just append the button to that cell instead of to the buttonContainer.

Mamun · Answer 3 · 2019-05-20T10:41:32.537

You can create the button and store that in a variable. Finally append the button.

Change:

cell5=document.createElement("BUTTON").innerHTML="Edit";

To:

var btn = document.createElement("button");
btn.textContent = "Edit";
btn.addEventListener("click",EditInfo); // attach event
cell5.append(btn);

function addOrder() {
  var book = $("#book_id").val();
  var qty = $("#qty").val();
  var price = $("#unit_price").val();
  var total = $("#dts_total_price").val();
  var table=document.getElementById("results");
  var row=table.insertRow(-1);
  var cell1=row.insertCell(0);
  var cell2=row.insertCell(1);
  var cell3=row.insertCell(2);
  var cell4=row.insertCell(3);
  var cell5=row.insertCell(4);
  cell1.innerHTML=book;
  cell2.innerHTML=qty;
  cell3.innerHTML=price;
  cell4.innerHTML=total;
  var btn = document.createElement("button");
  btn.textContent = "Edit";
  btn.addEventListener("click",EditInfo); // attach event
  cell5.append(btn);
}
function EditInfo(){
  alert('You have clicked the edit button');
}

table, td {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input palceholder="Book Id" id="book_id"/>
<input palceholder="" type="number" id="qty"/>
<input palceholder="Unit Price" id="unit_price"/>
<input palceholder="Total" id="dts_total_price"/>
<table id="results">
  
</table>

<button onclick="addOrder()">Ceate</button>

How to add a Button using javascript programetically

3 Answers3