На странице ToDo две кнопки добавления, для High и Low. Кнопка в High добавляет запись, а в Low ничего не происходит

Question

На странице ToDo есть два раздела приоритетов: High и Low. У каждого раздела есть поле с вводом задачи и кнопка добавления задачи. У раздела High в принципе работает, но в Low вообще не видит кнопку, ничего не работает. При нажатии на кнопку в High задача добавляется, но Low ничего не происходит, не знаю почему. Конечно, я не сделал проверку кнопки на принадлежность к определенному приоритету, но мне кажется так и так должно работать.

Помогите пожалуйста. Может ещё укажите на ошибки при построении логики. Мне не нужно пока добавлять текст в задачу, только разобраться почему не добавляется форма в разделе Low

const ELEMENTS = {
    HIGH: document.querySelector('.prior HIGH'), //   Приоритет HIGH 
    LOW : document.querySelector('.prior LOW'), //    и LOW

    ADDTASK : document.querySelector('#addTaskID'), //     блок добавления задачи
    TASKINPUT: document.querySelector('#addTaskInput'), //      инпут задачи
    ADDBTN: document.querySelector('#addTaskButton'), //    кнопка добавления
    
    TASKS: document.querySelector('.tasks'), // место где лежат задачи
    TASKFORM: document.querySelector('#taskFormID'), // форма задачи
    CHECKBOX: document.querySelector('#checkboxID'),  // чекбокс
    LABELTEXT : document.querySelector('#labelTextID'), //  текст задачи
    DELETETASK : document.querySelector('#deleteTask'), //  удаление задачи
}

function addTask(){ // функция добавления задачи
    const formTask = document.createElement('form'); // добавление формы, её id и класса
    formTask.id = 'taskFormID';
    formTask.className = 'taskForm';
    
    const checkTask = document.createElement('input'); // добавления input, её id, класс и типа
    checkTask.id = 'checkboxID';
    checkTask.className = 'checkboxClass';
    checkTask.type = 'checkbox';
    
    const labelTask = document.createElement('label'); // добавление текста, его id и класс
    labelTask.id = 'labelTextID'; 
    labelTask.className = 'labelText';

    const delTask = document.createElement('button'); // добавление кнопки, её id, класс и текст
    delTask.id = 'deleteTask';
    delTask.className = 'deleteButton';
    delTask.textContent = '✖';

    ELEMENTS.TASKS.insertAdjacentElement('beforeend', formTask); // вставка формы в Задачи, ниже в форму вставляются элементы формы
    formTask.appendChild(checkTask);
    formTask.appendChild(labelTask);
    formTask.appendChild(delTask);

}

ELEMENTS.ADDBTN.addEventListener('click', addTask); // при нажатии на кнопку запускать функцию добавления записи

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Comfortaa', sans-serif;
    font-weight: 400;
    line-height: 21px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: -webkit-linear-gradient(45deg, rgb(152, 207, 195), rgb(86, 181, 184), rgb(237, 242, 208));
    background: -moz-linear-gradient(45deg, rgb(152, 207, 195), rgb(86, 181, 184), rgb(237, 242, 208));
    background: linear-gradient(45deg, rgb(152, 207, 195), rgb(86, 181, 184), rgb(237, 242, 208));
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 550px;
    background: -webkit-linear-gradient(45deg, rgb(102, 200, 178), rgb(107, 219, 222));
    background: -moz-linear-gradient(45deg, rgb(102, 200, 178), rgb(107, 219, 222));
    background: linear-gradient(45deg, rgb(102, 200, 178), rgb(107, 219, 222));
    border-radius: 16px;
    border: 1px solid black;
}

.prior{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: inherit;
}

.taskDifficult {
    display: flex;
    align-items: center;
}

.addTask {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border: 1px solid black;
    border-radius: 8px;
    width: 500px;
    height: 45px;
    margin-top: 8px;
    margin-bottom: 8px;
    background-color: white;
}

.taskClass {
    font-family: inherit;
    width: 400px;
    border: none;
    text-decoration: none;
}

.addButton {
    /* border: none;
    background-color: white; */
    font-size: 32px;
}

.taskForm {
    display: flex;
    justify-content: space-between;
    border: 1px solid black;
    border-radius: 8px;
    width: 500px;
    padding: 12px;
    text-align: left;
    margin-bottom: 16px;
    background-color: white;
}

.labelText {
    max-width: 370px;
    display: flex;
    align-items: center;
}

.checkboxClass {
    height: 21px;
    width: 21px;
    border-radius: 50%;
    border: 2px solid #555;
}

.deleteButton {
    height: 50%;
    max-width: 15%;
    background-color: white;
    border: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>ToDo</title>
</head>

<body>
    <h1 class="titleName">ToDo</h1>
    <div class="wrapper">

        <div class="prior HIGH" >
            <h3 class="taskDifficult" id="high">HIGH</h3>

            <div class="addTask" id="addTaskID">
                <input type="text" placeholder="Добавить важных дел" id="addTaskInput" class="taskClass">
                <button class="addButton" id="addTaskButton">&plus;</button>
            </div>

            <div class="tasks">
                <form action="" class="taskForm" id="taskFormID">
                    <input type="checkbox" class="checkboxClass" id="checkboxID">
                    <label for="" class="labelText" id="labelTextID">Вот вам и супер интересная тема.
                        Вы наверняка заметили что ваши файлы с кодом становятся все объемнее, что хочется вынести
                        некоторые
                        вещи куда-то за пределы основной программы.</label>
                    <button id="deleteTask" class="deleteButton">&#10006;</button>
                </form>
            </div>
        </div>


        
        <div class="prior LOW" >
            <h3 class="taskDifficult" id="low">LOW</h3>

            <div class="addTask" id="addTaskID">
                <input type="text" placeholder="Добавить" id="addTaskInput" class="taskClass">
                <button class="addButton" id="addTaskButton">&plus;</button>
            </div>

            <div class="tasks">
                <form action="" class="taskForm" id="taskFormID">
                    <input type="checkbox" class="checkboxClass" id="checkboxID">
                    <label for="" class="labelText" id="labelTextID">Посмотреть ютубчик.</label>
                    <button id="deleteTask" class="deleteButton">&#10006;</button>
                </form>
            </div>
        </div>
        


    </div>
    <script src="main.js"></script>
</body>

</html>

Answer 1

Постарался разобрать Ваш пример и воспроизвести его.
Хотел отметить, что id, на мой взгляд неплохая вещь, но когда у Вас будет html строк на 1500-2000 будет сложнее вносить коррективы в систему.
Лучше стараться делать универсальные подходы, которые помогают экономить код и сделать его единым для все одинаковых кнопок.

Вы хорошо сделали в целом, основная проблема у Вас в id, Вы по id вызываете одни и те же элементы.

Попробовал убрать везде id, подготовить рабочий пример и добавить комментариев для понимания. Если что - готов подсказать, если есть вопросы или непонятен какой-то момент.

function addTask(item){ // Получаем элемент кнопки
    let item1 = item.parentNode.parentNode.children[2]; // Получаем основной блок в который входит кнопка, которую нажали и ищем в ней третий блок (задачи)
    let delID = item1.children.length + 1;
    let formTask = '<form class="taskForm"><input class="checkboxClass" type="checkbox"><label class="labelText"></label><button class="deleteButton" id="del'+delID+'">✖</button></form>'; // Можно собирать частями, как у Вас и использовать insertAdjacentElement или можно сразу часть html
    item1.insertAdjacentHTML('beforeend', formTask); // сразу добавляем HTML, а не элемент через функцию insertAdjacentHTML
}
let addButton = document.querySelectorAll('.addButton'); // Все кнопки с классом addButton
[...addButton].forEach(function (button){ // Для каждой кнопки
    button.addEventListener('click',function (){
        addTask(this); // выполняем функцию в которую передаем элемент кнопки, которую нажали.
    })
})

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Comfortaa', sans-serif;
    font-weight: 400;
    line-height: 21px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: -webkit-linear-gradient(45deg, rgb(152, 207, 195), rgb(86, 181, 184), rgb(237, 242, 208));
    background: -moz-linear-gradient(45deg, rgb(152, 207, 195), rgb(86, 181, 184), rgb(237, 242, 208));
    background: linear-gradient(45deg, rgb(152, 207, 195), rgb(86, 181, 184), rgb(237, 242, 208));
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 550px;
    background: -webkit-linear-gradient(45deg, rgb(102, 200, 178), rgb(107, 219, 222));
    background: -moz-linear-gradient(45deg, rgb(102, 200, 178), rgb(107, 219, 222));
    background: linear-gradient(45deg, rgb(102, 200, 178), rgb(107, 219, 222));
    border-radius: 16px;
    border: 1px solid black;
}

.prior{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: inherit;
}

.taskDifficult {
    display: flex;
    align-items: center;
}

.addTask {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border: 1px solid black;
    border-radius: 8px;
    width: 500px;
    height: 45px;
    margin-top: 8px;
    margin-bottom: 8px;
    background-color: white;
}

.taskClass {
    font-family: inherit;
    width: 400px;
    border: none;
    text-decoration: none;
}

.addButton {
    /* border: none;
    background-color: white; */
    font-size: 32px;
}

.taskForm {
    display: flex;
    justify-content: space-between;
    border: 1px solid black;
    border-radius: 8px;
    width: 500px;
    padding: 12px;
    text-align: left;
    margin-bottom: 16px;
    background-color: white;
}

.labelText {
    max-width: 370px;
    display: flex;
    align-items: center;
}

.checkboxClass {
    height: 21px;
    width: 21px;
    border-radius: 50%;
    border: 2px solid #555;
}

.deleteButton {
    height: 50%;
    max-width: 15%;
    background-color: white;
    border: none;
}*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Comfortaa', sans-serif;
    font-weight: 400;
    line-height: 21px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: -webkit-linear-gradient(45deg, rgb(152, 207, 195), rgb(86, 181, 184), rgb(237, 242, 208));
    background: -moz-linear-gradient(45deg, rgb(152, 207, 195), rgb(86, 181, 184), rgb(237, 242, 208));
    background: linear-gradient(45deg, rgb(152, 207, 195), rgb(86, 181, 184), rgb(237, 242, 208));
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 550px;
    background: -webkit-linear-gradient(45deg, rgb(102, 200, 178), rgb(107, 219, 222));
    background: -moz-linear-gradient(45deg, rgb(102, 200, 178), rgb(107, 219, 222));
    background: linear-gradient(45deg, rgb(102, 200, 178), rgb(107, 219, 222));
    border-radius: 16px;
    border: 1px solid black;
}

.prior{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: inherit;
}

.taskDifficult {
    display: flex;
    align-items: center;
}

.addTask {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border: 1px solid black;
    border-radius: 8px;
    width: 500px;
    height: 45px;
    margin-top: 8px;
    margin-bottom: 8px;
    background-color: white;
}

.taskClass {
    font-family: inherit;
    width: 400px;
    border: none;
    text-decoration: none;
}

.addButton {
    /* border: none;
    background-color: white; */
    font-size: 32px;
}

.taskForm {
    display: flex;
    justify-content: space-between;
    border: 1px solid black;
    border-radius: 8px;
    width: 500px;
    padding: 12px;
    text-align: left;
    margin-bottom: 16px;
    background-color: white;
}

.labelText {
    max-width: 370px;
    display: flex;
    align-items: center;
}

.checkboxClass {
    height: 21px;
    width: 21px;
    border-radius: 50%;
    border: 2px solid #555;
}

.deleteButton {
    height: 50%;
    max-width: 15%;
    background-color: white;
    border: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>ToDo</title>
</head>

<body>
<h1 class="titleName">ToDo</h1>
<div class="wrapper">
    <div class="prior HIGH" >
        <h3 class="taskDifficult">HIGH</h3>
        <div class="addTask">
            <input type="text" placeholder="Добавить важных дел" class="taskClass">
            <button class="addButton">&plus;</button>
        </div>
        <div class="tasks">
            <form action="" class="taskForm" id="del1">
                <input type="checkbox" class="checkboxClass">
                <label for="" class="labelText">Вот вам и супер интересная тема.
                    Вы наверняка заметили что ваши файлы с кодом становятся все объемнее, что хочется вынести
                    некоторые
                    вещи куда-то за пределы основной программы.</label>
                <button class="deleteButton">&#10006;</button>
            </form>
        </div>
    </div>

    <div class="prior LOW" >
        <h3 class="taskDifficult">LOW</h3>
        <div class="addTask">
            <input type="text" placeholder="Добавить" class="taskClass">
            <button class="addButton">&plus;</button>
        </div>
        <div class="tasks">
            <form action="" class="taskForm" id="del1">
                <input type="checkbox" class="checkboxClass">
                <label for="" class="labelText">Посмотреть ютубчик.</label>
                <button class="deleteButton">&#10006;</button>
            </form>
        </div>
    </div>
</div>
<script src="main.js"></script>
</body>

</html>

БЛОГ НА HUSL

На странице ToDo две кнопки добавления, для High и Low. Кнопка в High добавляет запись, а в Low ничего не происходит

Ответы (1 шт):