Я думаю, что переключение кнопки «Caret-Up / Don» не происходит в javascript из-за специфики

Question

У меня есть сценарий, в котором по умолчанию установлен "fa-caret-up", но при нажатии на него он должен измениться на fa-caret-down. Я переключаю его и использую font-awesome.

HTML код:

 <span id="caret" class="caret-box"><i class="fas fa-caret-down"></i></span>

javascript:

let caretEl = document.getElementById("caret");
caretEl.addEventListener("click", function(){
        caretEl.childNodes[0].classList.toggle("fa-caret-up");     
});

Я хочу знать, как это переключить. В нормальном сценарии это работает, но в этом конкретном сценарии это может не работать из-за высокой специфичности "fa-caret-down".

Answer 1

let caretEl = document.getElementById("caret");
caretEl.addEventListener("click", function(){

     // this is in HTML so this will get removed/added
      caretEl.childNodes[0].classList.toggle("fa-caret-down");

      caretEl.childNodes[0].classList.toggle("fa-caret-up");     
});