CODEWITHSUNDEEP
javascriptfunctionadditioncrud
fkrzski
fkrzski

Reputation: 255

Dynamically adding items to the list

I write CRUD applications for task management. I'm at the moment of creating a form with a task list. There are main and sub-tasks to nothing, e.g.

Main quest 1
    Sub-task 1
    Sub-task 2
Main quest 2
   Sub-task 1
Main quest 3
e.t.c...

I wrote a script that allows you to create a form with any number of main and side tasks

const ol = document.querySelector('ol');

function addMainQuest() {
  let newMain = document.createElement('li');
  newMain.innerHTML = '<input name="mainQuest" id="mainQuest" placeholder="Podaj główny cel zadania" class="questListInput mainQuest"><button type="button" onclick="addSecQuest()">Dodaj zad. podrzędne</button>';
  ol.append(newMain);
}
    
function addSecQuest() {
  let liLast = document.createElement('li');
  liLast.innerHTML = '<input name="secQuest" id="secQuest" placeholder="Podaj podrzędny cel zadania" class="questListInput secondaryQuest">';
  ol.append(liLast);
}
<ol id="ol" class="inputList">
  <li id="li">
    <input type="text" name="mainQuest1" id="mainQuest" placeholder="Podaj główny cel zadania" class="questListInput mainQuest">
    <button onclick="addSecQuest()" type="button">Add sec-quest</button>
  </li>
                        
</ol>
<button id="addMain" type="button" onclick="addMainQuest()">Add main quest</button>

... but I have a problem. When I have more than 1 main task created (for example 2) and I want to add a sub task to 1 main task, it is added to the very end of the list, under the last main task.

How to fix it?

Upvotes: 0

Views: 221

Answers (2)

Никита Однороб
Никита Однороб

Reputation: 47

You should create inner UL and put there LI elements. Try this

<html>
    <body>
        <ol id="ol" class="inputList">
            <li id="li">
                <input type="text" name="mainQuest1" id="mainQuest" placeholder="Podaj główny cel zadania" class="questListInput mainQuest">
                <button onclick="addSecQuest(event)" type="button">Add sec-quest</button>
            </li>
                            
        </ol>
        <button id="addMain" type="button" onclick="addMainQuest()">Add main quest</button>

        <script>
            function addMainQuest() {
                let newMain = document.createElement('li');
                newMain.innerHTML = '<input name="mainQuest" id="mainQuest" placeholder="Podaj główny cel zadania" class="questListInput mainQuest"><button type="button" onclick="addSecQuest(event)">Dodaj zad. podrzędne</button>'
                ol.append(newMain);
            }

            function addSecQuest(e) {
                const currentLi = e.target.parentNode;
                let innerUl;
                if (currentLi.children.length < 3) { // only input and button
                    innerUl = document.createElement('ul');
                    currentLi.append(innerUl);
                } else { // input, button and ul
                    innerUl = currentLi.children[2];
                }

                let liLast = document.createElement('li');
                liLast.innerHTML = '<input name="secQuest" id="secQuest" placeholder="Podaj podrzędny cel zadania" class="questListInput secondaryQuest">';
                innerUl.append(liLast);
            }

            addMainQuest();

        </script>
    </body>
</html>

Upvotes: 1

Nico Bleiler
Nico Bleiler

Reputation: 493

Add logic and markup for another <ul> tag, so you can have nested lists

<ul>
<li>Coffee</li>
<li>Tea
    <ul>
    <li>Black tea</li>
    <li>Green tea</li>
    </ul>
</li>
<li>Milk</li>
</ul>

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_nested

Upvotes: 2

Related Questions