Error when setting className, with js to dynamically change arrowhead style for multiple entries

ask God to debug https://codepen.io/xyj/pen/KR.


without changing the drop-down arrow toward the time effect chart.

everything is fine, click the entry for details. Now I want to change the direction of the arrow when the details appear. So I want to change the className, to call a different style of method, the code is as follows:

window.onload = function(){
    var details = document.getElementsByClassName("detail");
    var items = document.getElementsByClassName("items");
    var flex = document.getElementsByClassName("flex");
    var triA = document.getElementsByClassName("tri1");
    var triB = document.getElementsByClassName("tri2");
    j = [1,1,1,1]
    for (var i = 0; i < details.length; PPi){
        (function(i){
            console.log(triA[i]);
            details[i].addEventListener("click",function(){
                if(j[i] > 0){
                    items[i].style.display = "block";
                    flex[i].innerText = "";
                    triA[i].className = "tri3";
                    triB[i].className = "tri4";
                    j[i] = -j[i];
                }
                else if (j[i] < 0){
                    items[i].style.display = "none";
                    flex[i].innerText = "";
                    triA[i].className = "tri1";
                    triB[i].className = "tri2";
                    j[i] = -j[i];
                }
            })
        })(i)
    }
}

two entries are fine at the beginning, and then an exception occurs

Cannot set property "className" of undefinedat HTMLDivElement

Mar.11,2021

https://codepen.io/linong/pen.

look at me, mine is ready

the reason is that
var triA = document.getElementsByClassName ("tri1"); the array obtained by is changed if you change the class of the element inside, so the way to deal with it is to keep the element for yourself

.

clipboard.png
https://developer.mozilla.org...


HTMLCollection,NodeList
clipboard.png


upstairs explained the principle of the problem without repeating it.

why not try document.querySelectorAll

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b32982-341d7.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b32982-341d7.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?