Javascript transfer onClick from HTML to JS

Question

I have an HTML inline onClick event, but I need to transfer this one to only Javascript. How can I do this?

Currently I have

    function renderLinksList() {
      let linksList = ""; // creat an empty variable to manipulate the DOM outside

      for (let i = 0; i < myLinks.length; i++) {
        linksList += `
          <li>
            <a href="${myLinks[i]}" target="_blank">
              ${myLinks[i]}
            </a>
            <button id="remove-btn" onClick="removeIndividualItem(${i})">
              <svg class="close-icon" width="8px" xmlns="http://www.w3.org/2000/svg" 
                viewBox="0 0 320 512">
                <path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/>
               </svg></button>
          </li >
        `;
  }
  listEl.innerHTML = linksList;
}

// remove specific item from localStorage
  function removeIndividualItem(i) {
    myLinks.splice(i, 1);
    localStorage.setItem("myLinks", JSON.stringify(myLinks));
    renderLinksList();
}

    <button id="remove-btn" onClick="removeIndividualItem(${i})">

MegSowka · Accepted Answer · 2022-03-03 20:36:05Z

1

Start by grabbing element, and then add event listener to it :)

const removeBtn = document.getElementById('remove-btn');
removeBtn.addEventListener('click', removeIndividualItem);

Then modify removeIndividualItem() so it would target specific element by e.target Also. You cannot have multiple elements with same id, so it might be better to target all buttons with specific class instead.

answered Mar 3, 2022 at 20:36

MegSowka

264 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript transfer onClick from HTML to JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related