Я работаю над установкой onClick в строке шаблона. Кнопка отображается так, как ожидалось, но при нажатии кнопки я не получаю журнал консоли, как ожидалось. По сути, я запускаю ответ сервера через анализатор и на основе того, что получаю обратно, я либо отображаю кнопку, либо тег привязки. Кнопка запускает модальное окно, а тег привязки просто перенаправит пользователя на другую ссылку.
Для простоты я просто устанавливаю здесь два результата в переменные.
const testButton = `<button onClick = "${()=> console.info('testing click')}">test</button>`;
const testAnchor = `<a href = "${passedURL}" target = "_blank">${someText}</a>`;
Тег привязки полностью работает, как и ожидалось, но кнопке onClick не нравится. Я думаю, это как-то связано с этим.
Это на стороне клиента в файле .ts.
🤔 А знаете ли вы, что...
JavaScript поддерживает модульную структуру, что способствует организации кода на больших проектах.
Код внутри атрибута onclick кнопки обычно не должен быть определением функции, а скорее кодом для выполнения. В вашем случае нажатие кнопки не вызывает функцию () => console.info('testing click'), а определяет функцию при каждом нажатии, что бессмысленно.
Вероятно, вы хотите сказать const testButton = `<button onClick = "console.info('testing click')">test</button>;.
Тем не менее, добавление обработчиков onclick таким способом не является хорошей практикой. Рассмотрите возможность создания нового элемента кнопки с использованием API-интерфейсов dom и добавления к этой кнопке прослушивателя кликов вместо описанного выше.
При работе со строками шаблона в JavaScript (или TypeScript) и добавлении прослушивателей событий, таких как onClick, прослушиватель событий не будет работать напрямую при использовании упомянутого вами подхода. Проблема возникает из-за того, что атрибут onClick в строке HTML не оценивается как функция при преобразовании строки в HTML.
Вместо этого вам следует добавить прослушиватель событий программно после того, как элемент был вставлен в DOM. Вот как вы можете этого добиться:
Вот пример, демонстрирующий этот подход:
const passedURL = "https://example.com";
const someText = "Go to Example";
const testButton = `<button id = "testButton">test</button>`;
const testAnchor = `<a href = "${passedURL}" target = "_blank">${someText}</a>`;
const container = document.getElementById('container');
if (container) {
container.innerHTML = testButton;
const buttonElement = document.getElementById('testButton');
if (buttonElement) {
buttonElement.addEventListener('click', () => console.info('testing click'));
}
container.innerHTML += testAnchor;
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Template String Example</title>
</head>
<body>
<div id = "container"></div>
<script src = "app.js"></script>
</body>
</html>