Javascript/HTML использование querySelector совместно с insertAdjacentHTML

Question

Я хочу сделать выпадающий список с помощью insertAdjacentHTML, но есть проблема с определением, куда вставлять переменную, оно вставляется всегда в первый элемент, независимо от того, какая кнопка была нажата. Помогите вставить строку в элемент, который был нажат. Код и скриншот прилагаю.

    function walletRowTemplate(adress, passPhrase, maticBalance, avaxBalance, trxBalance, ftmBalance, bnbBalance, ethBalance, usdBalance) {
    return `<tr id="ETH_${adress}" class="walletTableRow">
            <td class="wallet_num"></td>
            <td class="wallet_phrase">
                <span>${passPhrase}</span>
                <button onclick="copyToClipboard('${passPhrase}')"title="Копировать"><img src="public/icons/copy.png"></button>
            </td>
            <td class="wallet_MATIC_balance">${maticBalance}</td>
            <td class="wallet_AVAX_balance">${avaxBalance}</td>
            <td class="wallet_TRX_balance">${trxBalance}</td>
            <td class="wallet_SOL_balance">0</td>
            <td class="wallet_FTM_balance">${ftmBalance}</td>
            <td class="wallet_BNB_balance">${bnbBalance}</td>
            <td class="wallet_ETH_balance">${ethBalance}</td>
            <td class="wallet_USD_balance">${usdBalance}$</td>
            <td class="wallet_actions">
                <button onclick="updateWalletBalance('${adress}')"><img src="public/icons/magnifier.png"></button>
            </td>
            </tr>`
}

    function copyToClipboard(passPhrase) {
        query('#walletListTable tr .wallet_phrase').insertAdjacentHTML('beforeend', `<li>${passPhrase}</li>`)
    }

Answer 1

querуSelector всегда выбирает первый элемент, а вам нужно выбрать тот, который относится к конкретной кнопке. Это можно сделать с помощь this и и навигации по DOM.

Answer 2

При клике возникает событие Event, свойствами которого можно пользоваться:

<td class="wallet_phrase">
  <span>span</span>
  <button onclick="copyToClipboard('atata')" title="Копировать">button</button>
  <button onclick="copyToClipboard('atata2')" title="Копировать">button</button>
</td>
<script>
  function copyToClipboard(passPhrase) {
    //console.log(event.currentTarget);
    console.log(passPhrase);
    event.currentTarget.insertAdjacentHTML('beforeend', `<li>li</li>`)
  }
</script>

БЛОГ НА HUSL

Javascript/HTML использование querySelector совместно с insertAdjacentHTML

Ответы (2 шт):