Loading...
Ivelinka avatar Ivelinka 24 Точки

Проблем със задача 05. Accordion от Asynchronous Programming - Exercise

Здравейте, получавам 33/100 и последния бутон не работи, някой може ли да ми помогне ?

Благодаря :)

задача: https://judge.softuni.org/Contests/Practice/Index/3466#4

код: 

async function solution() {

    const main = document.getElementById('main');

    const url = `http://localhost:3030/jsonstore/advanced/articles/list`;

    const response = await fetch(url);

    const data = await response.json();

 

    data.forEach(x => {

        const divAccordion = document.createElement('div')

        divAccordion.setAttribute('class', 'accordion')

        divAccordion.innerHTML += `

        <div class="head">

          <span>${x.title}</span>

          <button id="${x._id}">More</button>

        </div>

        <div class="extra">

          <p></p>

        </div>

        `

        document.querySelectorAll('button').forEach(x => x.addEventListener('click', toggle));

        main.appendChild(divAccordion)

    });

 

    async function toggle(event) {

        const accordion = event.target.parentNode.parentNode;

        const id = event.target.id;

 

        const p = accordion.children[1].firstChild;

        const extra = accordion.children[1];

 

        const url = `http://localhost:3030/jsonstore/advanced/articles/details/${id}`;

        const response = await fetch(url);

        const data = await response.json();

        p.textContent = data.content;

        const inHidden = event.target.textContent == 'More';

        extra.style.display = inHidden ? 'block' : 'none';

        event.target.textContent = inHidden ? 'Less' : 'More';

    }

 

}

 

solution();

Тагове:
0
JavaScript Applications
icowwww avatar icowwww 2813 Точки

Здравей,

Последния бутон не работи, защото добавяш eventListener на селекция в document, преди елемента да е свързан към document.

document.querySelectorAll('button').forEach(x => x.addEventListener('click', toggle));

Тук смени document на divAccordion или премести реда да е след 

main.appendChild(divAccordion)

 

Document e object, който отговаря на главния елемент и е връзка с всички други елементи в уеб страницата. 

При създаването на елемент в скрипта през document.createElement се създава елемент, който не съществува в html-a, докато не бъде добавен например с appendChild.

Затова дори да се опиташ да селектираш бутоните през document последния няма да е наличен, защото все още не е част от html-a

1
Ivelinka avatar Ivelinka 24 Точки

Благодаря !

0
Можем ли да използваме бисквитки?
Ние използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Можете да се съгласите с всички или част от тях.
Назад
Функционални
Използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Използваме „сесийни“ бисквитки, за да Ви идентифицираме временно. Те се пазят само по време на активната употреба на услугите ни. След излизане от приложението, затваряне на браузъра или мобилното устройство, данните се трият. Използваме бисквитки, за да предоставим опцията „Запомни Ме“, която Ви позволява да използвате нашите услуги без да предоставяте потребителско име и парола. Допълнително е възможно да използваме бисквитки за да съхраняваме различни малки настройки, като избор на езика, позиции на менюта и персонализирано съдържание. Използваме бисквитки и за измерване на маркетинговите ни усилия.
Рекламни
Използваме бисквитки, за да измерваме маркетинг ефективността ни, броене на посещения, както и за проследяването дали дадено електронно писмо е било отворено.