Как заблокировать кнопку после создания дела в todo листе?
Всем привет. Написал код, чтобы кнопка создания дела в todo листе была не активной когда строка инпута пустая, но после создания дела кнопка остается активной. Не понимаю как сделать, чтобы кнопка была не активной после создания дела.
Сайт: todolist-first.webtm.ru
button.disabled = true; input.addEventListener('input', function (event) { let val = event.target.value; if (val === '') { button.disabled = true; } else { button.disabled = false; } }); |
button.disabled = true; input.addEventListener('input', function (event) { let val = event.target.value; if (val === '') { button.disabled = true; } else { button.disabled = false; } });
Дополнительно:
событие называется не input а change
input.addEventListener('input', function (event) {
let val = event.target.value;
if (val === '') {
button.setAttribute('disabled', '');
} else {
button.removeAttribute('disabled', '');
}
});
Простенький код
<div> <input id="field" /> <button id="add">Добавить</button> <div id="list">list: </div> </div> <script> const button = document.getElementById("add") const input = document.getElementById("field") button.disabled = true; input.addEventListener('input', function (event) { let val = event.target.value; if (val === '') { button.disabled = true; } else { button.disabled = false; } }); button.addEventListener("click", (e) => { const inputValue = input.value if(inputValue) { document.getElementById("list").innerHTML += inputValue + " | " input.value = "" button.disabled = true } }) </script> |
<div> <input id="field" /> <button id="add">Добавить</button> <div id="list">list: </div> </div> <script> const button = document.getElementById("add") const input = document.getElementById("field") button.disabled = true; input.addEventListener('input', function (event) { let val = event.target.value; if (val === '') { button.disabled = true; } else { button.disabled = false; } }); button.addEventListener("click", (e) => { const inputValue = input.value if(inputValue) { document.getElementById("list").innerHTML += inputValue + " | " input.value = "" button.disabled = true } }) </script>
Предоставленный код отлично работает. Но в нем нет информации, по которой бы js додумался отключить кнопку. После создания дела и отключайте её
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы заблокировать кнопку после создания дела в todo листе, вам необходимо использовать JavaScript. Вот пример кода, который поможет вам решить эту проблему:
```html
function addTodo() {
var todoInput = document.getElementById("todoInput");
var todoList = document.getElementById("todoList");
var todoText = todoInput.value;
if (todoText === "") {
alert("Please enter a todo!");
return;
}
var li = document.createElement("li");
li.textContent = todoText;
todoList.appendChild(li);
todoInput.value = "";
// Заблокировать кнопку после создания дела
var addButton = document.querySelector("button");
addButton.disabled = true;
}
```
Этот код создает простой todo лист, где вы можете добавлять дела. После того как вы добавите новое дело, кнопка "Add Todo" будет заблокирована, чтобы предотвратить добавление пустых дел. Вы можете адаптировать этот код под ваши нужды, добавив стилизацию кнопки или другие функции.