Добавление обработчика события `click` к элементу: Тренажер JavaScript: Покоряем HTML DOM

Изменение текста при клике

Добавьте обработчик события `click` к кнопке. При нажатии на кнопку текст внутри элемента с id "myParagraph" должен измениться на "Новый текст".

HTML

Восстановить HTML

                      <p id="myParagraph">Исходный текст</p>
<button id="myButton">Нажми меня</button>

<p id="myParagraph">Исходный текст</p>
<button id="myButton">Нажми меня</button>

JavaScript

document.getElementById("myButton").onclick = function() {
  document.input__1("myParagraph").input__2 = "Новый текст";
};

                     document.getElementById("myButton").onclick = function() {
  document.input__1("myParagraph").input__2 = "Новый текст";
};

Используйте `document.getElementById()` для получения элемента по ID. Затем добавьте обработчик события `onclick` к кнопке и присвойте ему функцию, которая изменяет свойство `innerHTML` целевого элемента.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Изменение цвета фона

Добавьте обработчик события `click` к кнопке. При клике цвет фона элемента с id "myDiv" должен стать красным.

CSS

#myDiv { width: 100px; height: 100px; background-color: lightgray; }

HTML

Восстановить HTML

                      <div id="myDiv"></div>
<button id="myButton">Изменить цвет</button>

<div id="myDiv"></div>
<button id="myButton">Изменить цвет</button>

JavaScript

document.getElementById("myButton").onclick = function() {
  document.getElementById("myDiv").style.input__1 = "red";
};

                     document.getElementById("myButton").onclick = function() {
  document.getElementById("myDiv").style.input__1 = "red";
};

Получите элемент по ID с помощью `document.getElementById()`. Добавьте обработчик `onclick` к кнопке. Внутри обработчика измените свойство `style.backgroundColor` элемента.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Добавление класса

Добавьте обработчик события `click` к кнопке. При клике к элементу с id "myParagraph" должен добавляться класс "highlight".

CSS

.highlight { background-color: yellow; }

HTML

Восстановить HTML

                      <p id="myParagraph">Текст для выделения</p>
<button id="myButton">Выделить</button>

<p id="myParagraph">Текст для выделения</p>
<button id="myButton">Выделить</button>

JavaScript

document.getElementById("myButton").onclick = function() {
  document.getElementById("myParagraph").classList.input__1("highlight");
};

                     document.getElementById("myButton").onclick = function() {
  document.getElementById("myParagraph").classList.input__1("highlight");
};

Используйте `document.getElementById()` для получения элемента. Добавьте обработчик `onclick`. Внутри обработчика используйте свойство `classList` и метод `add()` для добавления класса.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Переключение класса

Добавьте обработчик `click` к кнопке. При каждом клике класс "highlight" должен добавляться или удаляться у элемента с id "myParagraph".

CSS

.highlight { font-weight: bold; }

HTML

Восстановить HTML

                      <p id="myParagraph">Текст для переключения</p>
<button id="myButton">Переключить</button>

<p id="myParagraph">Текст для переключения</p>
<button id="myButton">Переключить</button>

JavaScript

document.getElementById("myButton").input__1 = function() {
  document.getElementById("myParagraph").classList.input__2("highlight");
};

                     document.getElementById("myButton").input__1 = function() {
  document.getElementById("myParagraph").classList.input__2("highlight");
};

Получите элемент по ID. Добавьте обработчик `onclick`. Используйте метод `toggle()` объекта `classList` для переключения класса.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Скрытие/отображение элемента

Добавьте обработчик `click` к кнопке. При клике элемент с id "myImage" должен скрываться, если он видим, и отображаться, если он скрыт.

HTML

Восстановить HTML

                      <img id="myImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Картинка">
<button id="myButton">Скрыть/Показать</button>

<img id="myImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Картинка">
<button id="myButton">Скрыть/Показать</button>

JavaScript

document.getElementById("myButton").onclick = function() {
  let img = document.getElementById("myImage");
  if (img.style.display === "none") {
    img.style.display = "input__1";
  } else {
    img.style.display = "input__2";
  }
};

                     document.getElementById("myButton").onclick = function() {
  let img = document.getElementById("myImage");
  if (img.style.display === "none") {
    img.style.display = "input__1";
  } else {
    img.style.display = "input__2";
  }
};

Получите элемент по ID. Добавьте обработчик `onclick`. Внутри обработчика проверяйте текущее значение свойства `style.display`. Если оно равно "none", установите его в "block" (или другое подходящее значение), иначе установите в "none".

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Изменение атрибута src

Добавьте обработчик события `click` к кнопке. При нажатии на кнопку, атрибут `src` у изображения с id="myImage" должен меняться на другую картинку.

HTML

Восстановить HTML

                      <img id="myImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Картинка 1">
<button id="myButton">Сменить картинку</button>

<img id="myImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Картинка 1">
<button id="myButton">Сменить картинку</button>

JavaScript

document.getElementById(input__1).onclick = function() {
  document.getElementById("myImage").src = "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png";
};

                     document.getElementById(input__1).onclick = function() {
  document.getElementById("myImage").src = "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png";
};

Используйте `document.getElementById()`, чтобы получить изображение по ID. Добавьте обработчик события `onclick` к кнопке. Внутри обработчика измените значение атрибута `src` изображения.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Увеличение счетчика

Добавьте обработчик `click` к кнопке. При каждом клике значение в элементе с id "counter" должно увеличиваться на 1.

HTML

Восстановить HTML

                      <p>Счетчик: <span id="counter">0</span></p>
<button id="myButton">Увеличить</button>

<p>Счетчик: <span id="counter">0</span></p>
<button id="myButton">Увеличить</button>

JavaScript

document.getElementById("myButton").onclick = function() {
  let count = parseInt(document.getElementById("counter").input__1);
  count = input__2 + 1;
  document.getElementById("counter").textContent = count;
};

                     document.getElementById("myButton").onclick = function() {
  let count = parseInt(document.getElementById("counter").input__1);
  count = input__2 + 1;
  document.getElementById("counter").textContent = count;
};

Получите элемент по ID. Добавьте обработчик `onclick`. Внутри обработчика получите текущее значение счетчика, преобразуйте его в число, увеличьте на 1 и запишите обратно в элемент.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Анимация при клике (простое изменение)

Добавьте обработчик `click` к квадрату. При клике его ширина должна увеличиваться на 20 пикселей.

CSS

#mySquare { width: 50px; height: 50px; background-color: blue; }

HTML

Восстановить HTML

                      <div id="mySquare"></div>

<div id="mySquare"></div>

JavaScript

document.getElementById("mySquare").onclick = function() {
  let width = parseInt(getComputedStyle(document.getElementById("mySquare")).width);
  document.getElementById("mySquare").style.width = (width + input__1) + "px";
};

                     document.getElementById("mySquare").onclick = function() {
  let width = parseInt(getComputedStyle(document.getElementById("mySquare")).width);
  document.getElementById("mySquare").style.width = (width + input__1) + "px";
};

Получите элемент по ID. Добавьте обработчик `onclick`. Внутри обработчика получите текущую ширину элемента (используйте `parseInt` и `getComputedStyle`), увеличьте её на 20 и присвойте новое значение свойству `style.width`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Вывод сообщения в console.log

Добавьте обработчик события `click` к кнопке. При нажатии на кнопку должно появляться всплывающее окно с сообщением "Привет, мир!".

HTML

Восстановить HTML

                      <button id="myButton">Нажми меня</button>

<button id="myButton">Нажми меня</button>

JavaScript

document.getElementById("myButton").onclick = function() {
  input__1("Привет, мир!");
};

                     document.getElementById("myButton").onclick = function() {
  input__1("Привет, мир!");
};

Добавьте обработчик события `onclick` к кнопке. Внутри обработчика вызовите функцию `console.log()` с нужным сообщением.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Вызов функции при клике

Добавьте обработчик `click` к кнопке, который вызывает функцию `myFunction`.

HTML

Восстановить HTML

                      <button id="myButton">Вызвать функцию</button>

<button id="myButton">Вызвать функцию</button>

JavaScript

function myFunction() {
  console.log("Функция вызвана!");
}

document.getElementById("myButton").onclick = input__1;

                     function myFunction() {
  console.log("Функция вызвана!");
}

document.getElementById("myButton").onclick = input__1;

Определите функцию `myFunction`. Добавьте обработчик `onclick` к кнопке и присвойте ему имя функции (без круглых скобок).

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Передача аргумента в функцию при клике

Добавьте обработчик `click` к кнопке, который вызывает функцию `showMessage` и передает ей аргумент "Клик!". Функция `showMessage` должна выводить переданный аргумент в `console.log`.

HTML

Восстановить HTML

                      <button id="myButton">Передать сообщение</button>

<button id="myButton">Передать сообщение</button>

JavaScript

function showMessage(message) {
  console.log(message);
}

document.getElementById("myButton").onclick = function() {
  showMessage(input__1);
};

                     function showMessage(message) {
  console.log(message);
}

document.getElementById("myButton").onclick = function() {
  showMessage(input__1);
};

Определите функцию `showMessage`, принимающую один аргумент. Добавьте обработчик `onclick` к кнопке. Внутри обработчика вызовите функцию `showMessage`, передав ей нужный аргумент.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Использование this

Добавьте обработчик события `click` к кнопке. При клике на кнопку, измените её текст на "Нажато!". Используйте `this` для ссылки на кнопку внутри обработчика.

HTML

Восстановить HTML

                      <button id="myButton">Нажми меня</button>

<button id="myButton">Нажми меня</button>

JavaScript

document.getElementById("myButton").onclick = function() {
  input__1.textContent = "Нажато!";
};

                     document.getElementById("myButton").onclick = function() {
  input__1.textContent = "Нажато!";
};

Внутри обработчика события `click`, `this` ссылается на элемент, вызвавший событие (в данном случае, кнопку). Используйте `this.textContent` (или `this.innerHTML`), чтобы изменить текст кнопки.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Удаление обработчика события

Добавьте обработчик `click` к кнопке, который выводит сообщение в `console.log`. Затем добавьте вторую кнопку, при клике на которую первый обработчик должен удаляться.

HTML

Восстановить HTML

                      <button id="addButton">Добавить обработчик</button>
<button id="removeButton">Удалить обработчик</button>

<button id="addButton">Добавить обработчик</button>
<button id="removeButton">Удалить обработчик</button>

JavaScript

function show() {
  console.log('Обработчик работает!');
}

document.getElementById("addButton").onclick = show;

document.getElementById("removeButton").onclick = function() {
  document.getElementById("addButton").onclick = input__1;
};

                     function show() {
  console.log('Обработчик работает!');
}

document.getElementById("addButton").onclick = show;

document.getElementById("removeButton").onclick = function() {
  document.getElementById("addButton").onclick = input__1;
};

Создайте функцию-обработчик. Добавьте обработчик `onclick` к первой кнопке, используя имя функции. Добавьте обработчик `onclick` ко второй кнопке. Внутри второго обработчика присвойте свойству `onclick` первой кнопки значение `null`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Предотвращение действия по умолчанию

Добавьте обработчик события `click` к ссылке. Предотвратите переход по ссылке при клике.

HTML

Восстановить HTML

                      <a id="myLink" href="https://www.example.com">Ссылка</a>

<a id="myLink" href="https://www.example.com">Ссылка</a>

JavaScript

document.getElementById("myLink").onclick = function(event) {
  input__1.preventDefault();
  console.log("Переход по ссылке отменен!");
};

                     document.getElementById("myLink").onclick = function(event) {
  input__1.preventDefault();
  console.log("Переход по ссылке отменен!");
};

Добавьте обработчик события `onclick` к ссылке. Внутри обработчика вызовите метод `preventDefault()` у объекта события.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Всплытие событий

Добавьте обработчики `click` к родителю и потомку. Понаблюдайте за порядком вывода сообщений в `console.log` при клике на потомка.

CSS

#parent { padding: 20px; background-color: lightgray; }
#child { padding: 10px; background-color: lightblue; }

HTML

Восстановить HTML

                      <div id="parent">
  Родитель
  <div id="child">Потомок</div>
</div>

<div id="parent">
  Родитель
  <div id="child">Потомок</div>
</div>

JavaScript

document.getElementById("parent").onclick = function() {
  console.log("Обработчик родителя");
};

document.getElementById("child").onclick = function() {
  console.log(input__1);
};

                     document.getElementById("parent").onclick = function() {
  console.log("Обработчик родителя");
};

document.getElementById("child").onclick = function() {
  console.log(input__1);
};

Добавьте обработчики `onclick` к обоим элементам. Внутри обработчиков выводите сообщения в `console.log`. Обратите внимание на порядок, в котором появляются сообщения.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку