HTMLCollection Doesn't recognize after my second click

JavaScript
1

I’m making Search Box and it has histories. When clicking the histories I want to remove clicked element and add it again as a first child. However, I have a problem.

For example:
if I click on the Number 4 element firstly everything is okay.
My 4. element becomes Number 1 element and number 3 element becomes number 4 element.

But if I click Number 4 element again, it behaves 3. element clicked. Maybe for this project, I can change the method but I want to understand why there is a problem.

My Elements:

    <div id="histories">
    <div class="history-content">9</div>
    <div class="history-content">8</div>
    <div class="history-content">7</div>
    <div class="history-content">6</div>
    <div class="history-content">5</div>
    <div class="history-content">4</div>
    <div class="history-content">3</div>
    <div class="history-content">2</div>
    <div class="history-content">1</div>
    </div>

Javascript:

    // HistoryContent is my element I want to change the order.
    let HistoryContent = document.getElementsByClassName("history-content");
    //historiesID is Parent Child(container) of HistoryContent
    const historiesID = document.getElementById("histories");
                
                
    document.addEventListener("DOMContentLoaded", (event) => {
    let click = 0;
    for(let i = 0; i<HistoryContent.length; i++) {
    HistoryContent[i].addEventListener("click", function(event) {
    // Thera are somethings I don't want to click so I attached the if condition
    if(event.target !== document.getElementsByClassName("history-icon") && document.getElementsByClassName("xmark-svg")) {
    let copy = HistoryContent[i]; 
    historiesID.insertBefore(copy, historiesID.firstElementChild);
    // Debugging
    click++;
    console.log("Index number of your clicked element:",i);
    console.log("That's your",click+"th click.");
            }
          });
          }
        });

I clicked 3 times at index number 3 and Debugging:

    Index number of your clicked element: 3
    That's your 1th click.

    Index number of your clicked element: 2
    That's your 2th click.

    Index number of your clicked element: 2
    That's your 3th click.
2

This is not the position on the page, it is the position inside the HTML collection. The Node has been removed from the page and inserted again, as a new node, it’s added at the end of the HTML Collection

Like, you have great issues if you keep clicking the first element in the history.

1 Like
3

Thank you for reply. I read this article and I look last items of HTML collection after insertbefore. But it’s correctly with I seen in the history. I tried so many things about insertbefore, and I tried use another way to insertbefore. But nothing changed.

4

You might also give one of the insertAdjacent methods a look.

My suggestion would be to use a data structure which is what you render to the DOM and make updates to. Any changes made to the data structure, like the reordering of items, are then re-rendered to the DOM after the reordering.

1 Like
5

I solved the problem. the problem exists because There is an addeventlistener with DOMContentLoaded and it has a function. My code recognizes the node, only when the function(addeventlistener) is initialized. So I can’t access changes to variables on HTMLCollection.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.