Why is the addTask () function not working?

  • 0
    The addTask () function works correctly, with one exception. It creates only one element in the same sheet, and then simply changes its value when trying to add another one. Here are screenshots and code:





    <body>
    	<div id="container">
    		<h1>ЗАДАЧИ</h1>
    		<input id="input_task" type="text" width="100%" placeholder="Введите задачу">
    		<input id="button_add" type="button" value="+" onclick="addTask()">
    
    		<ul id="list_task">
    			<!-- тут создаются задачи -->
    		</ul>
    	</div>
    
    	<script src="js/script.js"></script>
    </body>


    //подтягиваю DOM элементы
    const containerEl = document.getElementById('container');
    const list_taskEl = document.getElementById('list_task');
    const button_addEl = document.getElementById('button_add');
    
    //создание задачи по нажатию на клавишу интер
    document.addEventListener('keydown', (event) => {
        if (event.keyCode === 13) {
            addTask();
            clearInput();
        }
    })
    
    //функция очистки инпута
    function clearInput() {
        input_taskEl = document.getElementById('input_task').value = "";
    }
    
    //вот эта функция не работает. Она должна создавать новую задачу, но она не работает
    function addTask() {
        const input_taskEl = document.getElementById('input_task').value;
    
        let task = list_taskEl.innerHTML = `<div class="wrapper_li">
                                                <li>${input_taskEl}</li>
                                                <div class="buttons">
                                                    <button><i class="fa fa-edit"></i></button>
                                                    <button><i class="fa fa-close"></i></button>
                                                </div>
                                            </div>`
        list_taskEl.appendChild(task);
    }
    JavaScript Anonymous, Nov 1, 2019

  • 2 Answers
  • 0
    Hello!

    I hope I can correctly explain why your function is not working.

    First, you need to understand what needs to be done in the function:


    1. Get current value in input

    2. Create markup for a new task, where the important element is text from input

    3. Insert a new element into the ul. list_task and clear input





    If you take a closer look at your code, there are several problems, one of which, due to which, in general, your function does not work as expected, is rewriting.



    When a new element is added, the addTask function is activated.




    1. Internally, you get the value that is inside the input

    2. Create a variable and assign it to list_taskEl where, in turn, write the markup of the new element with the text. This way, even if you remove list_taskEl.appendChild (task) everything will work. But not in the way you would like.





    The question arises, what to do? The answer is: you should rework the code in the addTask function itself, skipping only the line where you get the value.



    In order not to immediately give an answer on how you can solve this at all, I will leave you a link to an interesting article that will help: insertAdjacentHTML .



    Below under Spoiler I will leave how I reworked your code. In case you still want to watch.



    Spoiler
    //создание задачи по нажатию на клавишу интер
    document.addEventListener('keydown', (event) => {
    if (event.code === "Enter") {
    addTask();
    clearInput();
    }
    })

    //функция очистки инпута
    function clearInput() {
    input_taskEl = document.getElementById('input_task').value = "";
    }

    const templateTask = (text) => {
    return `
    <li class="task">
    <h2 class="task__title">${text}</h2>
    <div class="task__buttons">
    <button class="task__button><i class="fa fa-edit"></i></button>
    <button class="task__button><i class="fa fa-close"></i></button>
    </div>
    </li>
    `
    }

    const addTask = () => {
    const input_taskEl = document.getElementById('input_task').value;

    const template = templateTask(input_taskEl);

    list_taskEl.insertAdjacentHTML('beforebegin', template);
    clearInput();
    }
    Vivienne Stanley

  • 0
    //вот эта функция не работает. Она должна создавать новую задачу, но она не работает
    function addTask() {
    const input_taskEl = document.getElementById('input_task').value;
    var task = document.createElement('div');
    task.classList.add('wrapper_li');
    task.innerHTML = `
    <li>${input_taskEl}</li>
    <div class="buttons">
    <button><i class="fa fa-edit"></i></button>
    <button><i class="fa fa-close"</i></button>
    </div>`;

    list_taskEl.appendChild(task);
    }
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!