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