Добавление/удаление атрибута `disabled` у элемента формы: Тренажер JavaScript: Покоряем HTML DOM

Тренажер по работе с HTML DOM на JavaScript для пользователей с начальным и средним уровнем подготовки.

В этом уроке вы попрактикуетесь в управлении атрибутом `disabled` для различных элементов форм с помощью JavaScript. Вы научитесь делать элементы интерактивными или неактивными, что является важным аспектом управления пользовательским интерфейсом. Каждое задание представляет собой готовую HTML-структуру, где вам нужно будет дописать JavaScript-код, чтобы добавить или удалить атрибут `disabled` в зависимости от условий задания.

Список тем

Включение кнопки

Дана кнопка, которая изначально неактивна (имеет атрибут `disabled`). Ваша задача - написать JavaScript-код, который убирает атрибут `disabled` у кнопки, делая её кликабельной. После выполнения кода кнопка должна стать активной, и на неё можно будет нажать.

HTML

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

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

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

JavaScript

document.getElementById("myButton").input__1("disabled");

                     document.getElementById("myButton").input__1("disabled");

Используйте метод `removeAttribute()` для удаления атрибута `disabled` у элемента.

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

Результат

Лог

Выполнить

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

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

Отключение кнопки

Дана активная кнопка. Напишите JavaScript-код, который добавляет атрибут `disabled` к кнопке, делая её неактивной. После выполнения кода кнопка должна стать некликабельной.

HTML

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

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

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

JavaScript

document.getElementById(input__1).setAttribute("disabled", input__2);

                     document.getElementById(input__1).setAttribute("disabled", input__2);

Используйте метод `setAttribute()` для добавления атрибута `disabled`.

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

Результат

Лог

Выполнить

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

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

Переключение состояния

Дана кнопка. Напишите JavaScript-код, который переключает состояние `disabled` кнопки: если кнопка активна, делает её неактивной, и наоборот. Используйте свойство `disabled`.

HTML

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

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

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

JavaScript

const button = document.getElementById("myButton");
button.disabled = input__1button.disabled;

                     const button = document.getElementById("myButton");
button.disabled = input__1button.disabled;

Используйте свойство `disabled` элемента и логическое отрицание `!` для переключения состояния.

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

Результат

Лог

Выполнить

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

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

Отключение поля ввода

Дано текстовое поле ввода. Напишите JavaScript-код, который делает это поле недоступным для редактирования (добавляет атрибут `disabled`).

HTML

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

                      <input type="text" id="myInput" value="Текст">

<input type="text" id="myInput" value="Текст">

JavaScript

document.getElementById(input__1).input__2 = input__3;

                     document.getElementById(input__1).input__2 = input__3;

Используйте метод `setAttribute()` или свойство `disabled`.

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

Результат

Лог

Выполнить

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

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

Включение поля ввода по клику

Дано текстовое поле, которое изначально недоступно, и кнопка. Напишите JavaScript-код, который делает поле доступным для редактирования при нажатии на кнопку.

HTML

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

                      <input type="text" id="myInput" value="Текст" disabled>
<button id="enableInput">Включить поле</button>

<input type="text" id="myInput" value="Текст" disabled>
<button id="enableInput">Включить поле</button>

JavaScript

const input = document.getElementById("myInput");
const button = document.getElementById("enableInput");

button.addEventListener("click", () => {
  input.input__1 = input__2;
});

                     const input = document.getElementById("myInput");
const button = document.getElementById("enableInput");

button.addEventListener("click", () => {
  input.input__1 = input__2;
});

Добавьте обработчик события `click` на кнопку. Внутри обработчика используйте метод `removeAttribute()` или свойство `disabled`.

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

Результат

Лог

Выполнить

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

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

Отключение кнопки по таймеру

Дана кнопка. Напишите JavaScript-код, который делает кнопку неактивной через 5 секунд после загрузки страницы.

HTML

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

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

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

JavaScript

setTimeout(() => {
  document.getElementById("myButton").input__1 = input__2;
}, input__3);

                     setTimeout(() => {
  document.getElementById("myButton").input__1 = input__2;
}, input__3);

Используйте функцию `setTimeout()` для создания задержки. Внутри функции, вызываемой `setTimeout()`, используйте метод `setAttribute()` или свойство `disabled`.

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

Результат

Лог

Выполнить

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

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

Управление несколькими элементами

Даны две кнопки и два текстовых поля. Напишите JavaScript-код, который при нажатии на первую кнопку делает первое поле недоступным, а второе - доступным. При нажатии на вторую кнопку - наоборот.

HTML

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

                      <input type="text" id="input1" value="Поле 1">
<input type="text" id="input2" value="Поле 2" disabled>
<button id="button1">Кнопка 1</button>
<button id="button2">Кнопка 2</button>

<input type="text" id="input1" value="Поле 1">
<input type="text" id="input2" value="Поле 2" disabled>
<button id="button1">Кнопка 1</button>
<button id="button2">Кнопка 2</button>

JavaScript

const input1 = document.getElementById("input1");
const input2 = document.getElementById("input2");
const button1 = document.getElementById("button1");
const button2 = document.getElementById("button2");

button1.addEventListener("click", () => {
  input1.disabled = true;
  input2.input__1 = input__2;
});

button2.addEventListener("click", () => {
  input2.disabled = true;
  input1.input__3 = input__4;
});

                     const input1 = document.getElementById("input1");
const input2 = document.getElementById("input2");
const button1 = document.getElementById("button1");
const button2 = document.getElementById("button2");

button1.addEventListener("click", () => {
  input1.disabled = true;
  input2.input__1 = input__2;
});

button2.addEventListener("click", () => {
  input2.disabled = true;
  input1.input__3 = input__4;
});

Добавьте обработчики события `click` на обе кнопки. Внутри обработчиков используйте метод `setAttribute()`/`removeAttribute()` или свойство `disabled`.

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

Результат

Лог

Выполнить

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

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

Динамическое добавление и удаление

Дана кнопка. При первом нажатии на кнопку она должна стать disabled. При втором нажатии disabled должен удалиться.

HTML

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

                      <button id="myBtn">Click Me</button>

<button id="myBtn">Click Me</button>

JavaScript

const btn = document.getElementById('myBtn');

btn.addEventListener('click', function() {
 if (btn.input__1('disabled')) {
 btn.input__2('disabled');
 } else {
 btn.input__3('disabled', 'disabled');
 }
});

                     const btn = document.getElementById('myBtn');

btn.addEventListener('click', function() {
 if (btn.input__1('disabled')) {
 btn.input__2('disabled');
 } else {
 btn.input__3('disabled', 'disabled');
 }
});

Используйте `hasAttribute` чтобы проверить наличие атрибута, и `removeAttribute` или `setAttribute` в зависимости от результата.

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

Результат

Лог

Выполнить

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

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