Adding Buttons to a Table created dynamically in vue.js

Question

I am trying to dynamically create buttons which are displayed in the 5th (last) column of a table, which is also created dynamically. Everything is created properly. However, upon clicking the buttons, the function is not triggered. Perhaps it is because I am using vue.js to develop my front-end. I have tried using "v-on:click" instead of "click" in the button.setAttribute('click', 'claim()') code below, but this did not help.

  var table = document.createElement('table')
  for (var i = 1; i <= 5; i++) {
    var th = document.createElement('th')
    th.appendChild(header)
    table.appendChild(th)
  for (var j = 1; j <= 4; j++) {
    var tr = document.createElement('tr')
    for (var k = 1; k <= 5; k++) {
      var td = document.createElement('td')
      var node = document.createTextNode(k)
      td.appendChild(node)
      tr.appendChild(td)
      if (k === 5) {
        var button = document.createElement('input')
        button.setAttribute('type', 'submit')
        button.setAttribute('value', 'Purchase')
        button.setAttribute('click', 'purchase()')
        td.appendChild(button)
      }
    }
    table.appendChild(tr)
  }

tuhin47 · Accepted Answer · 2020-11-01 02:29:19Z

1

You need to use addEventListener for adding any event. Example : button.addEventListener('click', purchase)

var app = document.getElementById("app");
var table = document.createElement('table');
app.appendChild(table)
for (var i = 1; i <= 5; i++) {
  var th = document.createElement('th')
  //th.appendChild(header)
  table.appendChild(th)
  for (var j = 1; j <= 4; j++) {
    var tr = document.createElement('tr')
    for (var k = 1; k <= 5; k++) {
      var td = document.createElement('td')
      var node = document.createTextNode(k)
      td.appendChild(node)
      tr.appendChild(td)
      if (k === 5) {
        var button = document.createElement('input')
        button.setAttribute('type', 'submit')
        button.setAttribute('value', 'Purchase')
        button.addEventListener('click', purchase)
        td.appendChild(button)
      }
    }
    table.appendChild(tr)
  }
}

function purchase() {
  console.log("done")
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id='app'>

</div>

answered Nov 1, 2020 at 2:29

tuhin47

6,2735 gold badges22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JF0001 Over a year ago

Thank you very much tuhin47 for your time and answer. That works indeed!

Collectives™ on Stack Overflow

Adding Buttons to a Table created dynamically in vue.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related