How to add a button to a specify card of multiple cards?-CodePudding

For example I have 4 cards, when I click on the edit button(each card have 1 edit button with the same class) I want to generate a save button but only on that card where I clicked the edit button

so far I tried to add a Boolean index but I realized that wont work, tried looping trough on each but I don't know how to stop on that card where i clicked the button

function modifyCard(){
    const cards = document.getElementsByClassName("card");
    for(let card of cards){
            const saveBtn = document.createElement("button");
            saveBtn.textContent = "save";
            saveBtn.setAttribute("class", "save-change");
            card.appendChild(saveBtn);
    }
}

<div id=content>
   <div >
        <label> Name </label>
        <p > Example 1</p>
        <label>Hours</hours>
         <p > 32</p>
        <button id="settings"> Edit</button>
    </div>
  <div >
        <label> Name </label>
        <p > Example 2</p>
        <label>Hours</hours>
         <p > 32</p>
        <button id="settings"> Edit</button>
   </div>
</div>

So when I click on the 2. card's Edit button i only want to generate a Save button on Example 2 Card

(And it is also possible that i have 50 different card so I would not add an id to each one of them)

CodePudding user response：

You cant use the same Id for different elements, use custom attribute (custom attributes starts with data-) or use css class instead

const editBtns = document.querySelectorAll('[data-id=settings]');

editBtns.forEach(btn => {
    btn.addEventListener('click', ()=> {
        // if there is no save button in the card component just create it
        if(!btn.parentElement.querySelector('[data-exist]')){
            const saveBtn = document.createElement("button");
            saveBtn.textContent = "save";
            // custom attribute
            saveBtn.setAttribute('data-exist', 'true');
            saveBtn.setAttribute("class", "save-change");
            
            // ParentElement in this case is the card
            btn.parentElement.appendChild(saveBtn);
            
            // When save button clicked
            saveBtn.addEventListener('click', ()=> {
                console.log("do what you want to do with save button here");
            })
        }
    });
});

<div id="content">
    <div >
        <label> Name </label>
        <p > Example 1</p> <label>Hours</label>
        <p > 32</p>
        <button data-id="settings"> Edit</button>
    </div>
    <div > 
        <label> Name </label>
        <p > Example 2</p> 
        <label>Hours</label>
        <p > 32</p> 
        <button data-id="settings"> Edit</button>
    </div>
</div>

CodePudding user response：

I hops you required to toggle the save/edit button in your UI.

function edit(index){
    const cards = document.getElementsByClassName("card");
    card[index].getElementById('save').style.visibility="visible";
    card[index].getElementById('edit').style.visibility="hidden";
    }
}

function save(index){
    const cards = document.getElementsByClassName("card");
    
    //save operation

    card[index].getElementById('save').style.visibility="hidden";
    card[index].getElementById('edit').style.visibility="visible";
    }
}

<div id=content>
   <div >
        <label> Name </label>
        <p > Example 1</p>
        <label>Hours</hours>
         <p > 32</p>
        <button id="settings" onClick="edit(0)"> Edit</button>
         <button id="save" onClick="save(0)"> Save</button>
    </div>
  <div >
        <label> Name </label>
        <p > Example 2</p>
        <label>Hours</hours>
         <p > 32</p>
        <button id="settings" onClick="edit(1)"> Edit</button>
        <button id="save" onClick="save(1)"> Save</button>
   </div>
</div>