Как использовать параметр моей функции в коде?

Question

Я получил фрагмент кода html и js, css тоже. Мне нужно использовать этот параметр accordionElem в моей функции, чтобы при щелчке он работал как аккордеон с анимацией, но если я добавлю параметр, мой код остановится.

HTML-код

<h1>Accordian</h1>

<a href="#" class="accordian">How do I learn about activities and events in the CS department?</a>
<p>...</p>

<a href="#" class="accordian">How do I become a section leader?</a>
<p>Please see the CS198 Website for more information about the section leading program.</p>

<a href="#" class="accordian">How many CS classes should I take this quarter?</a>
<p>Most students find that 2-3 classes is a manageable workload, but different students find different workloads comfortable. Most students find they are able to handle more CS classes per quarter as they advance in the major. For more details see the courseload recommendations webpage.</p>

<a href="#" class="accordian">How can I get a summer job or internship? How do I get a
full-time job?</a>
<p>...</p>
<a href="#" class="accordian">How do I file to graduate? Can I participate in the graduation ceremony even if I am not receiving a diploma?</a><p>...</p>

<a href="#" class="accordian">How does the Honor Code apply to CS?</a>
<p>...</p>

код JS Я хочу каким-то образом использовать этот accordianEllem, чтобы мой код мог работать.

   let createAccordian = function(accordianElem) {


let sadrzaj = accordianElem.nextElementSibling;

console.log(sadrzaj);

sadrzaj.style.transition = "max-height 0.5s ease-out";

if(sadrzaj.style.display === "block") {


/*  sadrzaj.style.maxHeight =  "0px";*/
    window.setTimeout(function () {
        sadrzaj.style.maxHeight = '0px';
    }, 50);


    window.setTimeout(function () {
    sadrzaj.style.display= 'none';
    }, 550);


    }
    else {

    sadrzaj.style.display = "block";
    sadrzaj.style.maxHeight = sadrzaj.scrollHeight + "px";

    }


      let getHeight = function () {
            sadrzaj.style.display = 'block'; 
            let height = sadrzaj.scrollHeight + 'px'; 
            sadrzaj.style.display = ''; 
            return height;
        };

        let height = getHeight(); 
        sadrzaj.style.display='block'; 
        sadrzaj.style.height = 'auto';
        sadrzaj.style.height = height; 


        window.setTimeout(function () {
            sadrzaj.style.height = '';
        }, 350);


   };


   const akordi = document.querySelectorAll('.accordian');

 const par = document.querySelectorAll('p');

 let aks = document.getElementsByClassName('accordian');
 console.log(aks);

 for( let i of par){ i.style.display = 'none';i.style.maxHeight = "0px"; }


 for( let i of akordi){           
     i.addEventListener('click',createAccordian(akordi)); }

Answer 1

Слушатели событий принимают функцию в качестве второго параметра, и в этой функции вы должны вызывать функцию createAcrodian, передавая параметры.

i.addEventListener('click', function() {
   createAccordian(i);
})

Или с использованием функции стрелки ES

i.addEventListener('click', () => createAccordian(i));

Я заметил, что вы перебираете массив akordi, но не пропускаете значение "i" (или элемент текущего цикла), но вы пропускаете весь массив. Если вы все еще учитесь, это действительно полезно всегда указывать значения console.log или запускать отладку в циклах, просто чтобы понять, что происходит.

Вы можете передать свою функцию этим слушателям событий, например.

i.addEventListener('click',createAccordian);

... Но поскольку вы передаете некоторые параметры, вам следует использовать один из приведенных выше примеров

PS. Я заметил, что вы используете свой родной язык для определения переменных, я настоятельно рекомендую вам использовать английский для всего.