Tengo un array de objetos y varios botones, cada botón corresponde a un objeto del array, quiero que al darle click a cualquier botón se imprima por consola el objeto de ese botón y los objetos correspondientes del siguiente y el anterior. Lo que he hecho es:
- Crear los botones dinámicamente y agregarlos al nodo padre.
- Asignarle un evento 'click' al nodo usando delegación de eventos, que es escuchar exclusivamente el evento de los elementos que tengan el titulo 'boton'.
- Una vez le de click al botón, imprimir por consola el nodo de ese elemento.
<!DOCTYPE html>
<html lang="es">
<head>
<title>LMI. Exercicis 5.5</title>
<meta charset="utf-8" />
</head>
<body>
<div class="ctr"></div>
<script>
// array de objetos
const menu = [
{
title: 'Plato 1',
description: 'lorem ipsum lorem ipsum',
price: '$00.00'
},
{
title: 'Plato 2',
description: 'lorem ipsum lorem ipsum',
price: '$00.00'
},
{
title: 'Plato 3',
description: 'lorem ipsum lorem ipsum',
price: '$00.00'
},
{
title: 'Plato 4',
description: 'lorem ipsum lorem ipsum',
price: '$00.00'
},
{
title: 'Plato 5',
description: 'lorem ipsum lorem ipsum',
price: '$00.00'
}
]
//uso reduce para ponerle 'keys' a cada objeto del array
const indexed = menu.reduce((acum, elem) => ({
...acum,
[elem.title]: elem,
}), {})
//creo un array de keys para usarlo en el for
const keys = Object.keys(indexed)
//crea los botones
const createBtn = (id) => {
const btn = document.createElement('button')
btn.innerText = `${indexed[id].title}`
btn.setAttribute('title', 'boton')
return btn
}
//agrego los botones al nodo
const nodo = document.querySelector('.ctr')
const addBtn = (id) =>{
const newBtn = createBtn(id)
return nodo.append(newBtn)
}
//itero el array de keys para crear los botones
function render() {
for(let i = 0; i < keys.length; i++){
addBtn(keys[i])
}
}
render()
//aplicando delagacion de eventos
nodo.addEventListener('click', getObjects)
function getObjects(e){
if(e.target.title === 'boton'){
console.log(e.target)
}
}
</script>
</body>
</html>