Tuve la idea de hacer un botón de "editar" para cada tarjeta de mi lista que transformó las áreas de lectura en un área de texto.
En la idea, nada complicado porque lo hice en una página de perfil. Pero en este ejemplo solo tenía un botón con mi área ya definida
Hoy tengo varias filas que van a tener un botón "editar". Al no tener la cantidad de botones que se generarán, no puedo crear una función para cada uno.
Tienes una idea ?
Con respecto a mi código, aquí hay un ejemplo de tarjeta de cómo se ve
En mi página de perfil, puse "texto de entrada" en mostrar ninguno y puse mi intervalo en mostrar heredar (y creo que hacer lo mismo aquí)
<div class="card-body "> <div class="row"> <div class="col"> <button>Click to update </button> </div> </div> <div class="row"> <div class="col"> <span style="display:inherit">read area</span> <input type="text" style="display:none">write area</input> </div> <div class="col"> <span style="display:inherit">read area 2</span> <input type="text" style="display:none">write area 2</input> </div> </div> </div>Sí, puede agregar una sola función como detector de eventos para varios elementos html. La clave es obtener el elemento que activó el evento para que se convierta en un parámetro para que la función funcione de acuerdo con el botón exacto en el que se hizo clic.
Eso se hace teniendo el event de argumento en su controlador de eventos y accediendo a event.target para recuperar el objeto que desencadena el evento.
Aquí hay una demostración que muestra ese concepto. Hay una colección de filas, cada una con un botón de edición. Los botones de edición se inicializan al principio para que a cada uno se le agregue un detector de eventos que apunte a la función única editClickHandler
//when document is ready document.addEventListener('DOMContentLoaded', ()=>{ //initialize buttons initEditButtons(); }); function initEditButtons(){ //retrieves all the button contained in .container .row collection editButtons = document.querySelectorAll('.container > .row > button.edit'); //for each one of them editButtons.forEach((editButton, i)=>{ //adds a click event handler editButton.addEventListener('click', editClickHandler); }); } function editClickHandler(event){ //find the currently selected row document.querySelector('.container > .row.rowSelected') //remove its selected class ?.classList.remove('rowSelected'); //clicked edit button const clickedButton = event.target; //row corresponding to the clicked button const selectedRow = clickedButton.closest('div.row'); //adds the class rowSelected to the clicked row selectedRow.classList.add('rowSelected'); } *{ box-sizing: border-box; } .container{ width: fit-content; } .row{ margin-bottom: 2px; padding: 3px 6px; } .rowSelected{ border: dashed 2px gray; } button.edit{ cursor: pointer; } <div class="container"> <div class="row"> <span>01</span> <span>Field1</span> <span>Field2</span> <button class="edit">Edit</button> </div> <div class="row"> <span>02</span> <span>Field1</span> <span>Field2</span> <button class="edit">Edit</button> </div> <div class="row"> <span>03</span> <span>Field1</span> <span>Field2</span> <button class="edit">Edit</button> </div> <div class="row"> <span>04</span> <span>Field1</span> <span>Field2</span> <button class="edit">Edit</button> </div> </div>