15. Интерактивная кнопка
Сегодня мы создадим настоящую волшебную кнопку, которая умеет здороваться, менять цвет и даже считать, сколько раз ты её нажал!
Кнопка на сайте — как дверь: когда ты её нажимаешь, что-то происходит!
Шаг 1. Добавим кнопку на страницу
Открой свой файл index.html и вставь:
<button id="helloBtn">Скажи привет!</button>
Теперь на странице появилась простая кнопка. Но пока она не умеет ничего делать.
Шаг 2. Подключим JavaScript
Теперь сделаем, чтобы кнопка «ожила».
<script>
const btn = document.getElementById('helloBtn'); // нашли кнопку по IDbtn.addEventListener('click', function() {
alert('Привет Рад тебя видеть здесь!');
});
</script>
Теперь, если ты нажмёшь кнопку — появится сообщение!
Разбираем, что происходит
- document.getElementById('helloBtn') — находит кнопку на странице.
- addEventListener('click', ...) — слушает событие «клик» (нажатие).
- Когда клик происходит, выполняется команда внутри функции (в нашем случае — [b>alert()[/b]).
Шаг 3. Меняем текст при клике
Теперь вместо окна попробуем менять текст на самой кнопке:
const btn = document.getElementById('helloBtn');btn.addEventListener('click', function() {
btn.innerText = 'Привет, друг!';
});
Кнопка теперь сама «говорит» тебе привет прямо на странице!
Шаг 4. Меняем цвет кнопки
Можно сделать, чтобы при нажатии она становилась ярче.
const btn = document.getElementById('helloBtn');btn.addEventListener('click', function() {
btn.style.background = 'lightgreen';
btn.style.color = 'black';
btn.innerText = 'Приятно познакомиться! ';
});
Шаг 5. Добавим немного стиля
Сделаем кнопку красивой с помощью CSS:
#helloBtn {
background-color: #4CAF50;
color: white;
border: none;
padding: 15px 25px;
border-radius: 8px;
cursor: pointer;
font-size: 18px;
transition: background 0.3s, transform 0.2s;
}#helloBtn:hover {
background-color: #45a049;
transform: scale(1.05);
}
Теперь у тебя красивая кнопка, которая реагирует, когда ты к ней подносишь мышку!
Шаг 6. Считаем клики
Попробуем сделать кнопку-счётчик — она покажет, сколько раз ты её нажал.
let clicks = 0;
const btn = document.getElementById('helloBtn');btn.addEventListener('click', function() {
clicks += 1;
btn.innerText = 'Ты нажал ' + clicks + ' раз(а)!';
});
Теперь кнопка запоминает, сколько раз ты с ней взаимодействовал!
Мини-проект
Сделай свою интерактивную кнопку-питомца:- При первом нажатии — пишет «Привет!»
- При втором — меняет цвет.
- После 5 кликов — пишет «Ты чемпион кликов!»
Подсказка:
let clicks = 0;
const btn = document.getElementById('helloBtn');btn.addEventListener('click', function() {
clicks++;
if (clicks === 1) btn.innerText = 'Привет!';
else if (clicks === 2) btn.style.background = 'orange';
else if (clicks >= 5) btn.innerText = 'Ты чемпион кликов!';
});
Проверь себя
- Что делает команда addEventListener()?
- Как изменить текст кнопки с помощью JS?
- Как добавить стиль при наведении?
Забавный факт
Первая интерактивная кнопка в истории веба появилась в 1994 году — и открывала просто другую страницу! Сейчас кнопки умеют делать тысячи разных вещей.Главное запомни
- JavaScript помогает сайту «чувствовать» клики и реагировать.
- Можно менять текст, цвета и даже считать нажатия.
- Кнопка с addEventListener('click') — как волшебная палочка: всё оживает!