CODEWITHSUNDEEP
javascripthtml
JaRoMaster
JaRoMaster

Reputation: 179

Rearrange children orger in Javascript doesn't work multiple times

I've got the following code to move the childs order in an element. When I click once, it works fine, but when I click multiple times, it only works every 2nd or 3rd time.

const prevP = () => {
    const pList = document.getElementById("project-list")

    const firstProject = pList.firstChild;

    const lastProject = pList.lastChild;

    pList.insertBefore(lastProject, firstProject);
}

const nextP = () => {
    console.log("next");
    const pList = document.getElementById("project-list")

    const firstProject = pList.firstChild;

    let lastProject = pList.lastChild;

    pList.insertBefore(firstProject, lastProject);
}
<span class="material-icons md-48 close icon-btn" onclick="prevP()"
            >navigate_before</span
          >
          <div class="project-list" id="project-list">
            <div class="project">
              <img href="protfolio" alt="" />
              <p>My Portfolio 1</p>
            </div>
            <div class="project">
              <img href="protfolio" alt="" />
              <p>My Portfolio 2</p>
            </div>
            <div class="project">
              <img href="protfolio" alt="" />
              <p>My Portfolio 3</p>
            </div>
            <div class="project">
              <img href="protfolio" alt="" />
              <p>My Portfolio 4</p>
            </div>
            <div class="project">
              <img href="protfolio" alt="" />
              <p>My Portfolio 5</p>
            </div>
          </div>
          <span class="material-icons md-48 close icon-btn" onclick="nextP()"
            >navigate_next</span
          >

I also realised that sometimes the code messes up the order of the elements when using both buttons, and I have no idea why this is happening

Upvotes: 0

Views: 23

Answers (1)

trincot
trincot

Reputation: 350770

The cause of that behaviour is that you use firstChild and lastChild. These may select text nodes with just some white space. Change these to firstElementChild and lastElementChild.

Secondly, the "Next" action should not insert the first element before the last element, but after it. For that you can use the method appendChild:

    pList.appendChild(firstProject);

Upvotes: 2

Related Questions