|
To generate buttons dynamically by looping through an array of objects in JavaScript, |
|
you can use a forEach loop (or other iteration methods) to create the buttons and append |
|
them to the DOM. |
|
|
|
Here's how you can do it: |
|
|
|
Steps: |
|
Define an array of objects, where each object represents a food item with properties like name. |
|
Loop through the array and dynamically generate buttons based on the array content. |
|
Attach event listeners to each generated button to handle the click events. |
|
|
|
Here's an example. |
|
|
|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Dynamic Buttons</title> |
|
<style> |
|
.food-button { |
|
background-color: black; |
|
color: white; |
|
padding: 10px 20px; |
|
border-radius: 10px; |
|
margin: 10px; |
|
cursor: pointer; |
|
border: none; |
|
font-size: 18px; |
|
} |
|
.active { |
|
background-color: red !important; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div id="food-container"></div> |
|
|
|
<script> |
|
// Array of food objects |
|
const foods = [ |
|
{ name: "Bean" }, |
|
{ name: "Rice" }, |
|
{ name: "Yam" }, |
|
{ name: "Garri" } |
|
]; |
|
|
|
// Get the container to append the buttons |
|
const container = document.getElementById('food-container'); |
|
|
|
// Loop through the food array and create buttons dynamically |
|
foods.forEach(food => { |
|
// Create a button element |
|
let button = document.createElement('button'); |
|
button.textContent = food.name; |
|
button.classList.add('food-button'); |
|
|
|
// Append the button to the container |
|
container.appendChild(button); |
|
|
|
// Add click event to handle background color change |
|
button.addEventListener('click', function() { |
|
// Remove 'active' class from all buttons |
|
const allButtons = document.querySelectorAll('.food-button'); |
|
allButtons.forEach(btn => btn.classList.remove('active')); |
|
|
|
// Add 'active' class to the clicked button |
|
this.classList.add('active'); |
|
}); |
|
}); |
|
</script> |
|
</body> |
|
</html> |
|
|
|
|
|
Let's explain: |
|
|
|
Array of Objects: We define an array called foods, where each object represents a food item with a name property. |
|
|
|
|
|
const foods = [ |
|
{ name: "Bean" }, |
|
{ name: "Rice" }, |
|
{ name: "Yam" }, |
|
{ name: "Garri" } |
|
]; |
|
|
|
Dynamically Generating Buttons: |
|
|
|
We use forEach() to iterate through each object in the foods array. |
|
For each food, a button is created using document.createElement('button'), and its text content is set to the food's name. |
|
The button is styled with the class food-button and appended to the container (#food-container). |
|
Event Handling: |
|
|
|
When a button is clicked, we first remove the active class from all other buttons using querySelectorAll() and forEach(). |
|
Then we add the active class to the clicked button to change its background color to red. |
|
This method efficiently generates buttons from the array and ensures the clicked button changes color while the others revert to the default black background. |
here's the result
