как аргумент функции передать в шаблонную строку

Question

Как аргумент функции передать в шаблонную строку? Вот пример кода.

HTML

<button onclick="myFunctionCopy(1)">Copy text</button>

JavaScript

function myFunctionCopy(arg) {
 let copyText = document.querySelector('[data-copy="${arg}"]');
 window.navigator.clipboard.writeText(copyText.textContent);
 alert("Copied the text");
}

Если вместо arg вставить единицу, все работает, если ${arg} то не работает. Подскажите. Спасибо.

Answer 1

Кавычки имеют значение. Template literals (Template strings):

Template literals are enclosed by backtick (`) characters instead of double or single quotes.

const arg = 1;
console.log('[data-copy="${arg}"]');
console.log(`[data-copy="${arg}"]`);

Answer 2

Искать элементы по атрибутам и их содержимому - последнее дело, медленней ничего не придумаешь. Используйте по возможности getElementById, или querySelector('#id'). Это работает примерно в сотню раз быстрее.

Также навешивайте обработчик не через html, а через addEventListener. А если надо из элемента данные передать - в атрибуты data-* складывайте. Кнопка будет в target, a данные в её dataset.

Приведу рабочий ваш пример (как я его понял) и свой.

//Можно и так
function myFunctionCopy(arg) {
 let copyText = document.querySelector(`[data-copy="${arg}"]`).textContent
 window.navigator.clipboard.writeText(copyText);
 alert("Copied the text\n"+copyText);
}

// Но лучше так

//Не все браузеры сразу умеют по id обращаться к элементам DOM, однако это быстрей всего
//Если не сработает, добавить
//button1=document.getElementById('button1')
//или
//button1=document.querySelector('#button1')
button1.addEventListener('click', myFunctionCopy2)

function myFunctionCopy2(e) {
 let block_id = e.target.dataset.copy
 
 let copyText = window[block_id].textContent
 //объяснение выше, но по правилам так:
 //let copyText = document.getElementById(block_id).textContent
 window.navigator.clipboard.writeText(copyText.textContent);
 alert("Copied the text\n"+copyText);
}

<textarea data-copy="1">Test Test</textarea>
<button onclick=myFunctionCopy('1')>Copy text</button>
<br><br><br>

<textarea id="copy_block">Test2 Test2</textarea>
<button id="button1" data-copy="copy_block">Copy text</button>

БЛОГ НА HUSL

как аргумент функции передать в шаблонную строку

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