Loop array into button onclick event-CodePudding

I have this array and want to loop into buttons. The first cell will be in onclick event, the second will be in innerHTML. And append these buttons to div

The array:

rows = [
  [fun1(), 'innerhtml'],
  [fun2(), 'innerhtml'],
  [fun3(), 'innerhtml'],
];

CodePudding user response：

This will get you working as you would expect.

const fun1 = () => alert("Hello function 1");
const fun2 = () => alert("Hello function 2");
const fun3 = () => alert("Hello function 3");

const rows = [
  [fun1, 'innerhtml'],
  [fun2, 'innerhtml'],
  [fun3, 'innerhtml'],
];

const myDiv = document.getElementById('myDiv');

rows.forEach(row => {
    // Create button
    const button = document.createElement('button');

    // Apply onclick event
    button.onclick = row[0];
    button.innerHTML = row[1];

    // Append to div
    myDiv.appendChild(button);
})

const fun1 = () => alert("Hello function 1");
const fun2 = () => alert("Hello function 2");
const fun3 = () => alert("Hello function 3");

const rows = [
  [fun1, 'innerhtml'],
  [fun2, 'innerhtml'],
  [fun3, 'innerhtml'],
];

const myDiv = document.getElementById('myDiv');

rows.forEach(row => {
    // Create button
    const button = document.createElement('button');

    // Apply onclick event
    button.onclick = row[0];
    button.innerHTML = row[1];

    // Append to div
    myDiv.appendChild(button);
})

<div id="myDiv"></div>

The comments should explain what is happening throughout my code.