Entrar Ainda não tem acesso?
1
resposta

Uncaught TypeError: controle.forEach is not a function

Referente ao curso JavaScript: manipulando o DOM

por LUCAS MODESTO DE MELO SAMPAIO
| 37.2k xp | 1 posts
Professor de Yoga

Meu código está assim:

const controle = document.querySelector("[data-controle]")

controle.forEach( (elemento) => {
    elemento.addEventListener('click', (evento) => {
        manipulaDados(evento.target.textContent, evento.target.parentNode)
    })
})

function manipulaDados(operacao, controle) {
    const peca = controle.querySelector("[data-contador]")

    if(operacao === "-") {
        peca.value = parseInd(peca.value) - 1
    } else {
        peca.value = parseInt(peca.value) + 1
    }
}

E o DevTools me retorna esse Erro:

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

1 resposta
por Estudante
| 35.1k xp | 57 posts

Olá Lucas, tudo bem?

Analisando seu código, se a constante controle precisa executar o método forEach, muito provavelmente ela deve representar uma lista de elementos na interface que tenham o atributo [data-controle]. Se esse for o caso, então você precisa substituir o comando document.querySelector("[data-controle]") para document.querySelectorAll("[data-controle]").

Explico:

O comando document.querySelector sempre procura e retorna UM ELEMENTO na interface que atenda ao seletor usado. Se ele encontrar mais de um, vai retornar sempre o primeiro que for achado, mas será sempre assim: ou ele retorna UM ELEMENTO (se encontrar algum) ou retorna nulo se não achar.

O comando document.querySelectorAll sempre procura MAIS DE UM ELEMENTO na interface e retorna uma LISTA com todos os elementos que atendam ao seletor usado.

Como seu código vai usar um forEach, deduzi que controle seja uma lista de elementos e para ser uma lista de elementos ele precisaria receber o retorno do método querySelectorAll que retorna essa lista de elementos encontrados na DOM.

Teste e veja se funciona com essa correção.

Espero ter ajudado.

Att.