Loop array into button onclick event

February 23, 2022

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'],
];

>Solution :

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);
})