Для добавления класса "active" с помощью кнопки и TypeScript (ts) можно воспользоваться следующим способом. Для начала, укажем пример простого HTML-кода с кнопкой и элементом, которому мы хотим добавить класс "active":
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add class with button and TypeScript</title>
<style>
.active {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<button id="addButton">Add Class</button>
<p id="targetElement">Element to add class to</p>
</body>
</html>
Теперь добавим скрипт на TypeScript, который будет отслеживать клик по кнопке и добавлять класс "active" к элементу:
const button = document.getElementById('addButton');
const element = document.getElementById('targetElement');
button.addEventListener('click', () => {
if (element) {
element.classList.add('active');
}
});
В данном коде мы находим кнопку и элемент по их id, затем добавляем слушатель события "click" на кнопку. При каждом клике на кнопку, выполняется функция, которая проверяет, существует ли целевой элемент, и если да, то добавляет к нему класс "active".
Не забудьте скомпилировать файлы TypeScript в JavaScript с помощью TypeScript компилятора перед использованием на веб-странице.