I had the idea to make an "edit" button for each card of my list which transformed the reading areas into a text area.
In the idea, nothing complicated because I did it on a profile page. But in this example I only had one button with my area already defined
Today I have several rows that are all going to have an "edit" button. Not having the number of buttons that will be generated, I cannot create a function for each one.
Do you have an idea ?
Regarding my code, here is a card example of what it looks like
On my profile page, I had put "input text" in display none and I put my span in display inherit (and I think to do the same here)
<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>
Yes you can have a single function added as event listener for several html elements. The key is fetching the element that triggered the event so that it becomes a parameter for the function to work according to the exact button clicked.
That's made having the argument event in your event handler and accessing to the event.target to retrieve the object triggering the event.
Here's a demo showing that concept. There's a collection of rows each one having an edit button. The edit buttons are initialized at the begginning so that each one will be added an event listener pointing to the single function 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>