4
respostas

erro ao tenta esconder a lista de comprados

estou com problemas ao tenta esconder a lista de comprados

esse é o repositório: https://github.com/BirdMelo/Shopping-List

a lista de comprados está dessa forma:

<ul id="purchasedList" style='display: none'>
    <h2>Comprado</h2>
    <hr/>
</ul>

como pode ver ao colocar o style = 'display:none' a lista desaparece, mas ao colocar um item na lista nomeada como "purchaseList" ou lista de compras a lista de comprados ou "purchasedList" fica como display block.

esse aqui é a função que está com problemas:

export function checkEmptyPurchased(){
    if(purchasedList.childElementCount === 0){
        purchasedList.style.display = 'block';
    }else{
        purchasedList.style.display = 'block';
    }
}

e está é o local que foi chamado a função:

export function addPurchese(event){
    event.preventDefault()
        const itemList = createItemList(writtenName.value);
    purchaseList.appendChild(itemList);
    checkEmptyList(itemList);
    checkEmptyPurchased();
}

Oq estou entendendo do problema é: De inicio ele utiliza o style que foi posto na tag 'ul', mas após chamar a função "addPurchese" ele utiliza da função "checkEmptyPurchased" para dizer se está com display block ou none, mas sempre está dando o resultado que for posto no else. Só que agora eu n sei como resolver isso

4 respostas

Oi João! Tudo bem?

A função checkEmptyPurchased() está configurada para sempre definir o estilo de exibição da lista como 'block', independentemente do número de elementos filhos em purchasedList. Isso ocorre porque tanto no if quanto no else, o estilo é definido como 'block'. Para esconder a lista quando ela estiver vazia e mostrá-la quando houver itens, terá que ajustar essa função para verificar se a lista está vazia e, com base nisso, definir o estilo de exibição:

export function checkEmptyPurchased(){
    if(purchasedList.childElementCount === 0){
        purchasedList.style.display = 'none'; //mudamos o display para none
    }else{
        purchasedList.style.display = 'block';
    }
}

Com essa alteração, a lista purchasedList será exibida (display: block) apenas quando houver itens nela. Caso contrário, ela ficará escondida (display: none).

Espero que isso tenha ajudado! Caso ainda tenha dúvidas, conte com o fórum :)

Um abraço e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Perfeito, Rafaela, mas vc estou após a troca? mesmo colocando o codigo dessa maneira ocorre a mesma coisa. Pelo menos para mim n mudou nada

para atualizações das informações:

A função checkEmptyPurchased() está corrigida para ter essa variação de none e block.

Esse é o arquivo: addItem.js

import { checkEmptyList, checkEmptyPurchased} from "./checkEmpty.js";
import { createItemList } from "./createItemList.js";

const writtenName = document.getElementById('input-text');
const purchaseList = document.getElementById('purchaseList')



export function addPurchese(event){
    event.preventDefault()
        const itemList = createItemList(writtenName.value);
        purchaseList.appendChild(itemList);
        checkEmptyList(itemList);
        checkEmptyPurchased();
}

Esse é o arquivo: createItemList.js

const purchasedList = document.getElementById('purchasedList')
const purchaseList = document.getElementById('purchaseList')
let counter = 0;

export function createItemList(item){
    const itemList = document.createElement('li');
        const purchase = document.createElement('div');
        purchase.classList.add('purchase');

            const containerName = document.createElement('div');
                const checkboxContainer = document.createElement('div');
                checkboxContainer.classList.add('checkbox-container');

                    const checkboxInput = document.createElement('input');
                    checkboxInput.type = 'checkbox';
                    checkboxInput.classList.add('checkbox-input');
                    checkboxInput.id = 'checkbox-' + counter++;

                    const label = document.createElement('label');
                    label.setAttribute('for', checkboxInput.id);

                    label.addEventListener('click', function(event){
                        const checkboxInput = event.currentTarget.querySelector('.checkbox-input');
                        const customizedCheckbox = event.currentTarget.querySelector('.checkbox-customizado');
                        const itemName = event.currentTarget.closest('li').querySelector('#itemName');

                        if (checkboxInput.checked){
                            customizedCheckbox.classList.add('checked');
                            itemName.style.textDecoration = 'line-through'
                            purchasedList.appendChild(itemList);

                        } else{
                            customizedCheckbox.classList.remove('checked');
                            itemName.style.textDecoration = 'none';
                            purchaseList.appendChild(itemList);
                        }
                    })

                    const customizedCheckbox = document.createElement('div');
                    customizedCheckbox.classList.add('checkbox-customizado');

                    label.appendChild(checkboxInput);
                    label.appendChild(customizedCheckbox);
                    checkboxContainer.appendChild(label);

                containerName.appendChild(checkboxContainer);

                const purchaseName = document.createElement('p');
                purchaseName.id = 'itemName';
                purchaseName.innerText = item;
                containerName.appendChild(purchaseName);
            purchase.appendChild(containerName);

            const containerButtons = document.createElement('div');
                const deleteButton = document.createElement('button');
                deleteButton.classList.add('action-button');
                    const imgDelete = document.createElement('img');
                    imgDelete.src = "./img/delete.svg";
                    imgDelete.alt = "deletar";
                    deleteButton.appendChild(imgDelete);
                containerButtons.appendChild(deleteButton);

                const editButton = document.createElement('button');
                editButton.classList.add('action-button');
                    const imgEdit = document.createElement('img');
                    imgEdit.src = "./img/edit.svg";
                    imgEdit.alt = "editar";
                    editButton.appendChild(imgEdit);
                containerButtons.appendChild(editButton);
            purchase.appendChild(containerButtons);

        itemList.appendChild(purchase);
        const date = document.createElement('p');

        const weekday = new Date().toLocaleDateString('pt-BR', { weekday: 'long' });
        const weekdayCapitalized = weekday.charAt(0).toUpperCase() + weekday.slice(1);

        date.innerText = 
        `${weekdayCapitalized} (${new Date().toLocaleDateString()}) às ${new Date().toLocaleTimeString("pt-BR", {hour: "numeric", minute:'numeric'})}`
        itemList.appendChild(date);
        return itemList;
}

Oi João!

Não sei se já conseguiu solucionar, mas testei seus códigos do github e notei que faltou colocar style='display: block' na tag da mensagem de lista vazia no index.html:

<p id="emptyList_warning" style='display: block'>Sua lista está vazia. Adicione itens a ela para não esquecer nada na próxima compra!</p>

Foi o único ponto de melhoria que notei. Já a lista de comprados não está aparecendo pra mim ao adicionar um item como comentou que estava acontecendo. Você já conseguiu solucionar esse problema? Caso contrário, fico à disposição. Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!