HTML & JavaScript - функции внутри функций не работают

Question

У меня проблема с моими функциями Javascript.Я пытаюсь объяснить, что я пытаюсь сделать.Я использую гармошку Bootstrap для переключения между двумя разными контейнерами.У меня есть две складные кнопки (сделанные с иконками Fontawosome), которые по сути являются стрелками.Когда пользователь открывает страницу, обе кнопки не работают.При нажатии кнопки открывается контейнер, и стрелка вниз должна смениться стрелкой вверх.Но если, например, вторая стрелка уже нажата, когда нажата первая стрелка, тогда вторая стрелка должна вернуться в нижнее положение, а первая стрелка - в верхнее положение.Например:

1. стрелка ↓ & 2. стрелка ↑ --- 1. нажата стрелка -> 1. стрелка ↑ & 2. стрелка ↓
2. стрелка ↑ & 2.стрелка ↓ --- 2. нажата стрелка -> 1. стрелка ↓ & 2. стрелка ↑

Я сделал несколько функций Javascript, чтобы добавить эту функцию на страницу, но не могу ее получитьРабота.Я проверил с помощью Инструментов разработчика, что страница проходит через все функции, хотя она должна запускаться только тогда, когда пользователь нажимает на стрелку.И по какой-то причине, когда страница открыта, стрелки даже не видны.Не могли бы вы проверить мой код на Codepen и посмотреть, что с ним не так?

Javascript:

var collapseButton1 = document.getElementById("collapse-button1");
var collapseButton2 = document.getElementById("collapse-button2");

document.querySelector('#collapse-button1').addEventListener('click', 
changeCollapseButton1(collapseButton1, collapseButton2));
document.querySelector('#collapse-button2').addEventListener('click', 
changeCollapseButton2(collapseButton2, collapseButton1));


function changeCollapseButton1(button1, button2){
    console.log("Inside function changeCollapseButton1")
    if (button1.classList.contains('fa-chevron-down') && 
    button2.classList.contains('fa-chevron-up')) {
       console.log("Inside if.")
       button1 = changeUp(button1);
       button2 = document.querySelector('#collapse-
button2').addEventListener('click', changeDown(button2));   
       return button1 && button2;
   } else {
       console.log("Inside else.");
       button1 = changeDown(button1);
       return button1;
   }
}

function changeCollapseButton2(button2, button1){
    console.log("Inside function changeCollapseButton2")
    if (button2.classList.contains('fa-chevron-down') && 
button1.classList.contains('fa-chevron-up')) {
        console.log("Inside changeCollapseButton2's if.");
        button2 = changeUp(button2);
        button1 = document.querySelector('#collapse-
button1').addEventListener('click', changeDown(button1));
       return button2 && button1;
   } else {
       console.log("Inside changeCollapseButton2 else.")
       button2 = changeDown(button2);
       return button2;
   }
}

function changeDown(whichButton) {
    console.log("Inside changeDown function.")
    whichButton = whichButton.classList.toggle('fa-chevron-down');
}

function changeUp(whichButton){
    console.log("Inside changeUp function.")
    whichButton.classList.toggle('fa-chevron-up');
}
//=========================

Код дыры в коде: https://codepen.io/Miina/pen/XxRveg Код не содержит изображений, но не позволяйте этому отвлекать вас.

---

Обновление:

Я внес некоторые изменения в код.Я добавил слушатель событий в html следующим образом:

<i id="collapse-button1" class="fas fa-chevron-down fa-2x" 
onclick="changeCollapseButton1()" style="color: rgb(64, 127, 127)">
</i>

И затем я внес изменения в Javascript:

function changeCollapseButton1(){
    console.log("Inside function changeCollapseButton1")
    var button1 = document.getElementById("collapse-button1");
    var button2 = document.getElementById("collapse-button2");

    if (button1.classList.contains('fa-chevron-down') && 
    button2.classList.contains('fa-chevron-up')) {
        console.log("Inside if.")
        changeUp(button1);
        changeDown(button2);    
    } else {
        console.log("Inside else.");
        changeDown(button1);
    }
}

function changeCollapseButton2(){
    console.log("Inside function changeCollapseButton2");

    var button1 = document.getElementById("collapse-button1");
    var button2 = document.getElementById("collapse-button2");

    if (button2.classList.contains('fa-chevron-down') && 
    button1.classList.contains('fa-chevron-up')) {
        console.log("Inside changeCollapseButton2's if.");
        changeUp(button2);
        changeDown(button1);
    } else {
        console.log("Inside changeCollapseButton2 else.")
        changeDown(button2);
    }
}

function changeDown(whichButton) {
    console.log("Inside changeDown function.")
    whichButton.classList.toggle('fa-chevron-down');
}

function changeUp(whichButton){
    console.log("Inside changeUp function.")
    whichButton.classList.toggle('fa-chevron-up');
}
//=========================

Теперь он работает «лучше», но когда кнопкищелкнув значки просто исчезают.Поэтому я думаю, что с этой строкой что-то не так:

whichButton.classList.toggle('fa-chevron-down');

И это:

whichButton.classList.toggle('fa-chevron-up');

Но я не могу понять, что это такое.Обновленный кодовый код здесь: https://codepen.io/Miina/pen/mzwqZx?editors=1010

---

Эй, я заставил его работать !!Я дважды вызвал неправильную функцию, и мне пришлось внести некоторые изменения в вызов функции classList.toggle.Вот рабочее решение:

function changeCollapseButton1(){
    console.log("Inside function changeCollapseButton1")

    var button1 = document.getElementById("collapse-button1");
    var button2 = document.getElementById("collapse-button2");

    if (button1.classList.contains('fa-chevron-down') && 
    button2.classList.contains('fa-chevron-up')) {
        console.log("Inside if.")
        changeUp(button1);
        changeDown(button2);    
    } else {
        console.log("Inside else.");
        changeUp(button1);
    }
}

function changeCollapseButton2(){
    console.log("Inside function changeCollapseButton2");

    var button1 = document.getElementById("collapse-button1");
    var button2 = document.getElementById("collapse-button2");

    if (button2.classList.contains('fa-chevron-down') && 
    button1.classList.contains('fa-chevron-up')) {
        console.log("Inside changeCollapseButton2's if.");
        changeUp(button2);
        changeDown(button1);
    } else {
        console.log("Inside changeCollapseButton2 else.")
        changeUp(button2);
    }
}

function changeDown(whichButton) {
    console.log("Inside changeDown function.")
    whichButton.classList.toggle('fa-chevron-up', false);
    whichButton.classList.toggle('fa-chevron-down', true);
}

function changeUp(whichButton){
    console.log("Inside changeUp function.")
    whichButton.classList.toggle('fa-chevron-down', false);
    whichButton.classList.toggle('fa-chevron-up', true);
}
//=========================

Answer 1

document.querySelector('#collapse-button1').addEventListener('click', 
changeCollapseButton1(collapseButton1, collapseButton2));

Это вызывает changeCollapseButton1(collapseButton1, collapseButton2) и передает результат в addEventListener.Вы, вероятно, намеревались

document
    .querySelector('#collapse-button1')
    .addEventListener('click', 
        function() {changeCollapseButton1(collapseButton1, collapseButton2);}
    );

Все ваши addEventListener, кажется, вызывают нужный обработчик и пытаются установить этот результат в качестве обработчика.