How I make different objects from one class function?

I’m making a note-taker app.

The problem is….when I click the ‘view detail’ button which I created, no matter what button I click among these, it shows me the modal of last content that I made.

I believe it shows me the content from the last object I created from the class function. And the class function keeps refreshing the object.

I want it to show me the content depends on the ‘view detail’ button I clicked.

Can you help me? Thank you (I marked up ❓ on the code for I what I think the issue is so that you can read more easily)

class Note {
    constructor(a,b){
        this.title = a;
        this.body = b;   
    }
}

submitBtn.addEventListener('click',run);

function run(e) {
    e.preventDefault();

    let newNote = new Note(titleInput.value,noteInput.value);❓
         
    addNoteToList(newNote);    

    titleInput.value = "" ;
    noteInput.value = "" ;       
}

function addNoteToList(newNote) {
    let note = document.createElement('div');
    note.classList.add('note_new_container');    
    noteNew.append(note);   

    note.innerHTML=    
        <span hidden >${newNote.id}</span>
        <h2 class="note_title">${newNote.title.substring(0,20)}</h2> 
        <div class="note_content">${newNote.body.substring(0,30)}</div>
        <button class="myButton2 detail">view detail</button>
        <button class="myButton2 delete">delete</button>    
    ;  

    noteNew.addEventListener('click', (e) => {
        if (e.target.classList.contains('detail')) {
            activeModal(newNote);
            modalDetailContainer.classList.add('modal_show');
        }  
    }); 
}

function activeModal(a) {    
    document.querySelector('.modal_title').innerHTML= ${a.title};❓
    document.querySelector('.modal_content').innerHTML = ${a.body};❓
}

Answer

Your class code is fine, there is nothing wrong with the instances, and nothing is shared.

The problem is that you are attaching the listener – all listeners – to the noteNew container that holds all the notes, not to the invidual new note divs. Clicking on one .detail button will fire them all, and the last one will win.

Advertisement

Answer