user5430996
user5430996

Reputation:

Javascript CreateElement button

I have a problem I been suffering on for a couple hours now. The context is, I need to make a button with action listener in JavaScript and add it into a table.

Here is the code I have

var _button = document.createElement("button");
_button.data = _a;
_button.innerHTML = 'click me';
_button.onclick = function()
{
    alert("hello, world");
}

var table = document.getElementById("tableOnline");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);

var _weakbutton = _button.outerHTML;
_weakbutton.onclick = function()
{
    alert("hello, world");
}

cell1.innerHTML = "h";
cell2.innerHTML = "o";
cell3.innerHTML = _weakbutton;

The code works if I add the create the button and add it onto the body (without weakButton), but how can I make it work into a table?

Kind regards, Zhendos.

EDIT: Because requested, here is the table we talk about.

<div class = "container">
 <div class = "table">
  <thead id = "thead">
   <tr>
    <th> firstname <th>
    <th> lastname </th>
    <th> organisation </th>
   </tr>
  </thead>

  <tbody>

  </tbody>
 </table>
</div>

Upvotes: 1

Views: 24171

Answers (1)

arc
arc

Reputation: 4691

Instead of var _weakbutton = _button.outerHTML; create a copy of the button with var _weakbutton = _button.cloneNode(true);. This will create a new button, based on your original one.

Because this is now a button node, you can't add it with cell3.innerHTML = _weakbutton; but have to use cell3.appendChild( _weakbutton );

So, with your code it would be

var _button = document.createElement("button");
_button.data = "hi";
_button.innerHTML = 'click me';
_button.onclick = function()
{
    alert("hello, world");
}

var table = document.getElementById("tableOnline");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);

var _weakbutton = _button.cloneNode(true)
_weakbutton.onclick = function()
{
    alert("hello, world");
}

cell1.innerHTML = "h";
cell2.innerHTML = "o";
cell3.appendChild( _weakbutton );
<table id="tableOnline"></table>

Upvotes: 2

Related Questions