CODEWITHSUNDEEP
javascripthtml
Sakibul Haque
Sakibul Haque

Reputation: 87

How to add a Button using javascript programetically

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

Upvotes: 0

Views: 127

Answers (3)

Rob Monhemius
Rob Monhemius

Reputation: 5144

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.

Upvotes: 0

Mamun
Mamun

Reputation: 68933

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>

Upvotes: 0

Mangesh
Mangesh

Reputation: 365

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)

})

Upvotes: 1

Related Questions