How can I make two buttons with the same function work?

Question

and thank you for your time. Since I've added two+ buttons (run the code and press the "add table" button), all it does is add two new rows to the first table, and the subsequent buttons don't work. I've tried calling the classes, using the loop, and putting the code where it should be, but it still refuses. Here is my code:




  


Word List

        

  
    Word
    English
    Pronunciation

vee · Accepted Answer

I think you have to try to understand about JavaScript Event delegation. There are a lot of tutorials about this for example 1, 2, 3, and a lot more on Google.
If you understand how it works, it will be easy and very helpful for you that you don't have to create or call many many event listeners.

Let see my example.

let addNewBtn = document.getElementById('add-new-btn');
addNewBtn.onclick = function() {
    let newBtnHTML = '';
    document.getElementById('new-button-placeholder').insertAdjacentHTML('beforeend', newBtnHTML);
};


// below is how event delegation works.
// start with listen for click event on root element (`document`)
document.addEventListener('click', (e) => {
    let thisTarget = e.target;
    // the code above is to get `.target` property of clicked element for use later.

    let thisBtn = thisTarget.closest('.addtext');
    // the code above is to get closest button that has `addtext` in the class value. If this button is not exists then it will not go inside the `if` below.

    if (thisBtn) {
        // if this button exists.
        e.preventDefault();// this is for prevent default action in case of form submit. It is no need in this example but just in case you may have to use it later.

        // now add some text to `.debug` HTML element.
        let someText = 'Hello world';
        document.querySelector('.debug').insertAdjacentHTML('beforeend', '' + someText + '');
    }
    // if button is not exists, it will be ignore and has nothing to work here anymore.
});

.debug {
    border: 2px dashed #ccc;
    margin-bottom: 20px;
    padding: 10px;
}

Please read the code comment above because I was described everything step by step.
The example code above will work when you click on Add some text and Add new button that will be clicked and add some text buttons. The newly added buttons will be work the same way as existing button without to call or add any new event listener.

This is how Event delegation works.

Now with your work.

The HTML that will be dynamically add by JS should not use the same id. The delete button with id="deletethismaybe" or anything with id=".." that has the same value when you add should be omitted. Use class=".." instead. This is for valid HTML.
Use the descriptive names on everything if possible. No deletethismaybe, or thatBtn, etc because you will confuse yourself in the future.
The td, or th must be inside tr only NOT inside div. So,
is invalid HTML!

document.getElementById("addtable").onclick = function() {
  let puttable = document.getElementById("ntable");
  let section = puttable.querySelector('section');

  let tableHTML = '

' + '' + '' +
    '' +
    '' + '' +
    '' +
    '' +
    '' +
    '' +
    '' + '' + '' + '' + '' + '' + 'Word' + '' +
    ' ' + 'English' + ' ' + 'Pronunciation' + ' 
' +
    ' 
' + '' + '' + '
' + '';

  section.insertAdjacentHTML('beforebegin', tableHTML);
}

// listen click event from root element (`document`).
document.addEventListener('click', (e) => {
  let thisTarget = e.target;

  // work with delete table button.
  let deleteTableBtn = thisTarget.closest('.delete-table');
  if (deleteTableBtn) {
    // if delete button exists.
    e.preventDefault();
    thisTarget.closest('table').remove();
  }
  // end

  // work with add row button.
  let addRowBtn = thisTarget.closest('.addrow');
  if (addRowBtn) {
    // if add row button exists.
    e.preventDefault();
    // get closest table element for use later.
    let thisTable = addRowBtn.closest('table');
    // get input values that is under this table where add button was clicked.
    let wordValue = thisTable.querySelector('.w').value;
    let engValue = thisTable.querySelector('.m').value;
    let pronunValue = thisTable.querySelector('.p').value;
    // generate new table row (`tr`)
    let trHTML = '' +
      '' + wordValue + '' +
      '' + engValue + '' +
      '' + pronunValue + '' + '' +
      '';
    thisTable.querySelector('tfoot').insertAdjacentHTML('beforebegin', trHTML);
  }
  // end

  // work with delete row button.
  let deleteRowBtn = thisTarget.closest('.delete-row');
  if (deleteRowBtn) {
    // if delete row button exists.
    e.preventDefault();
    thisTarget.closest('tr').remove();
  }
  // end
})

Word List

  
    Word
    English
    Pronunciation

From the code above you will see that I use only one event listener and detect that what button does it come form and work with it inside if condition if button exists.

See it in jsfiddle.

Again: Please try to understand about Event delegation as I described from the first because I believe that it will be useful for you.

How can I make two buttons with the same function work?

Answers (2)

Related Questions