Loading...
Dragomanov avatar Dragomanov 15 Точки

01. Music Site - JS Advanced Final Exam - 23 October 2021

Здравейте, имам проблем с тази DOM задача.- Music Site - JS Advanced Final Exam - 23 October 2021

Дава ми 75/100. Естествено при мен в сайта работи както пише. laugh

Предполагам бутона Delete, който присъства и в двете секции и изпълнява същите действия, може да ползва една и съща функция.

Използвам .cloneNode(true) , би трябвало да се поддържа в Judge! Не съм го ползвал до сега.

Потърсих във форума, но не намерих предходни решения на задачатаfrown

Ето линк към моето решение:

 https://pastebin.com/r8uzM8G5

 

Тагове:
0
JavaScript Advanced 31/05/2022 15:14:15
Axiomatik avatar Axiomatik 2422 Точки

Yeah, most likely occurs from saveSong function. Better be safe for the exam and refrain from using cloneNode and just go old-school (appendChild ...).

100% =>

function solve() {
    //TODO

    const allHitsField = document.querySelector('.all-hits-container');
    const likeField = document.querySelector('.likes p');
    const saveField = document.querySelector('.saved-container');

    const genreField = document.getElementById('genre');
    const nameField = document.getElementById('name');
    const authorField = document.getElementById('author');
    const dateField = document.getElementById('date');
    const addButton = document.getElementById('add-btn');

    addButton.addEventListener('click', addNewSong);

    function addNewSong(e) {
        e.preventDefault();

        const genre = genreField.value;
        const name = nameField.value;
        const author = authorField.value;
        const date = dateField.value;

        if (genre === '' || name === '' || author === '' || date === '') {
            return;
        }

        const div = document.createElement('div');
        div.className = 'hits-info';

        const img = document.createElement('img');
        img.src = './static/img/img.png';

        const h1 = document.createElement('h2');
        h1.textContent = `Genre: ${genre}`;
        const h2 = document.createElement('h2');
        h2.textContent = `Name: ${name}`;
        const h3 = document.createElement('h2');
        h3.textContent = `Author: ${author}`;
        const h4 = document.createElement('h3');
        h4.textContent = `Date: ${date}`;

        const saveBtn = document.createElement('button');
        saveBtn.className = 'save-btn';
        saveBtn.textContent = 'Save song';
        saveBtn.addEventListener('click', saveSong);

        const likeBtn = document.createElement('button');
        likeBtn.className = 'like-btn';
        likeBtn.textContent = 'Like song';
        likeBtn.addEventListener('click', likeSong);

        const deleteBtn = document.createElement('button');
        deleteBtn.className = 'delete-btn';
        deleteBtn.textContent = 'Delete';
        deleteBtn.addEventListener('click', deleteSong);

        div.appendChild(img);
        div.appendChild(h1);
        div.appendChild(h2);
        div.appendChild(h3);
        div.appendChild(h4);
        div.appendChild(saveBtn);
        div.appendChild(likeBtn);
        div.appendChild(deleteBtn);

        allHitsField.appendChild(div);

        genreField.value = '';
        nameField.value = '';
        authorField.value = '';
        dateField.value = '';

        function saveSong(e) {
            e.target.parentElement.remove();

            const div = document.createElement('div');
            div.className = 'hits-info';

            const img = document.createElement('img');
            img.src = './static/img/img.png';

            const h1 = document.createElement('h2');
            h1.textContent = `Genre: ${genre}`;
            const h2 = document.createElement('h2');
            h2.textContent = `Name: ${name}`;
            const h3 = document.createElement('h2');
            h3.textContent = `Author: ${author}`;
            const h4 = document.createElement('h3');
            h4.textContent = `Date: ${date}`;

            const deleteBtn = document.createElement('button');
            deleteBtn.className = 'delete-btn';
            deleteBtn.textContent = 'Delete';
            deleteBtn.addEventListener('click', deleteSong);

            div.appendChild(img);
            div.appendChild(h1);
            div.appendChild(h2);
            div.appendChild(h3);
            div.appendChild(h4);

            div.appendChild(deleteBtn);

            saveField.appendChild(div);
        }
    }

    function likeSong(e) {
        e.target.disabled = true;
        let totalLike = likeField.textContent.replace('Total Likes: ', '');
        totalLike = Number(totalLike);
        totalLike++;

        likeField.textContent = `Total Likes: ${totalLike}`;
    }

    function deleteSong(e) {
        e.target.parentElement.remove();
    }
}

 

0
Dragomanov avatar Dragomanov 15 Точки

Благодаря, ти за бързия отговор и съвета. Дава 100/100.

Разбрах си грешката. Проблемът е че НЕ Премествам, а просто КЛОНИРАМ, т.е. песента присъства и в двете секции. Трябва просто да се премести div секцията с appendChild и да се изтрият двата бутона..

 

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