Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] erro no javascript

tive problema com o meu código na aula: esse é o javascript que eu estava montando, deu um erro no checkboxInput.

const writtenName = document.getElementById('input-text');
const saveButton = document.getElementById('saveButton');
const purchaseList = document.getElementById('purchaseList')
let contador = 0;

saveButton.addEventListener('click', addPurchese);

function addPurchese(event){
    event.preventDefault()
    console.log('funcionando')

    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 label = document.createElement('label');
                    label.setAttribute("for", checkboxInput.id);
                        const checkboxInput = document.createElement('input');
                        checkboxInput.type = 'checkbox';
                        checkboxInput.classList.add('checkbox-input');
                        checkboxInput.id = 'checkbox-' + counter++;
                        label.appendChild(checkboxInput);

                        const checkboxCustomizado = document.createElement(div)
                        checkboxCustomizado.classList.add('checkbox-customizado')
                        label.appendChild(checkboxCustomizado);
                    checkboxContainer.appendChild(label)
                containerName.appendChild(checkboxContainer);

                const purchaseName = document.createElement('p');
                purchaseName.innerText = writtenName.value;
                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);
    purchaseList.appendChild(itemList);

o erro aprensentado foi esse:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta
solução!

Olá João!

Poderia me passar em que aula ou curso você está, isso vai me ajudar a te fornecer uma resposta mais assertiva.

Porém do que eu observei do seu código, O erro pode ser porque você está tentando acessar checkboxInput.id antes de checkboxInput ser criado. Por padrão você deve criar o checkboxInput antes de definir o atributo for do label. Com essa ideia em mente, teste esse código:

const writtenName = document.getElementById('input-text');
const saveButton = document.getElementById('saveButton');
const purchaseList = document.getElementById('purchaseList');
let contador = 0;

saveButton.addEventListener('click', addPurchese);

function addPurchese(event) {
    event.preventDefault();
    console.log('funcionando');

    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-' + contador++;

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

    const checkboxCustomizado = document.createElement('div');
    checkboxCustomizado.classList.add('checkbox-customizado');
    label.appendChild(checkboxCustomizado);

    checkboxContainer.appendChild(label);
    containerName.appendChild(checkboxContainer);

    const purchaseName = document.createElement('p');
    purchaseName.innerText = writtenName.value;
    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);
    purchaseList.appendChild(itemList);
}

Caso não tenha funcionado, reforço a mensagem acima, compartilhe o link da aula, obrigado!

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

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