Multiples buttons for unique js function-CodePudding

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 >
 <div >
  <div >
   <button>Click to update </button>
  </div>
 </div>
 <div >
  <div >
   <span style="display:inherit">read area</span>
   <input type="text" style="display:none">write area</input>
  </div>
  <div >
   <span style="display:inherit">read area 2</span>
   <input type="text" style="display:none">write area 2</input>
  </div>
 </div>
</div>

CodePudding user response：

Can you simply target the HTML element based on the event fired? Then you can use the HTML node's parent, siblings, etc. to do the manipulation.

CodePudding user response：

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 >
  <div >
    <span>01</span>
    <span>Field1</span>
    <span>Field2</span>
    <button >Edit</button>
  </div>
  <div >
    <span>02</span>
    <span>Field1</span>
    <span>Field2</span>
    <button >Edit</button>
  </div>
  <div >
    <span>03</span>
    <span>Field1</span>
    <span>Field2</span>
    <button >Edit</button>
  </div>
  <div >
    <span>04</span>
    <span>Field1</span>
    <span>Field2</span>
    <button >Edit</button>
  </div>
</div>