Как запретить создание новой задачи в ToDo в JavaScript?
Как запретить создание новой задачи в JavaScript до тех пор пока input не будет заполнен пользователем?
<section class="todoForm">
<div class="form">
<!-- LEFT COLUMN -->
<div class="left-column">
<div class="title-text">Список дел:</div>
<div class="todos-list">Список пуст...</div>
<div class="todos">
<div class="todo"></div>
</div>
</div>
</div>
<!-- /.LEFT COLUMN -->
<!-- RIGHT COLUMN -->
<div class="right-column">
<div class="title-text" placeholder="Добавить новое дело">Добавить новое дело</div>
<div class="create-todo">
<input type="text" name="name" required>
</div>
<button class="addTodo">Добавить дело</button>
</div>
<!-- /.RIGHT COLUMN -->
</div>
</section>
<script src="js/script.js"></script>
</body>
let button = document.querySelector(".addTodo");
let todosList = document.querySelector(".todos-list");
let todos = document.querySelector(".todos");
let input = document.querySelector("input");
let todo = document.querySelector(".todo");
button.addEventListener("click", addTodo);
button.addEventListener("click", function(event) {
// скрытие фразы "Список пуст"
todosList.hidden = true;
// очистка input
input.value = " ";
// если не заполнен input
if (input.value === ' ') {
alert("Добавьте новое дело!");
addTodo.preventDefault();
};
});
// добавление нового дела
function addTodo(event) {
let li = document.createElement("li");
li.className = "createTodo";
li.textContent = input.value;
todos.append(li);
// если не заполнен input
if (input.value === ' ') {
addTodo.preventDefault();
};
}
// смена состояния дела: сделано / не сделано
todos.addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
event.target.classList.toggle('completedTodo');
}
}, false
);