6
respostas

[Bug] Aula 4 unidade unidade 2 - erro no controle-contador subtrair

Boa noite! Estou com problema no controle contador no subtrair Insira aqui a descrição dessa imagem para ajudar na acessibilidade JS

const controle = document.querySelectorAll(".controle-ajuste")

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

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

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

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/jpg" href="img/favicon.ico"/>
    <title>Robotron 2000</title>

    <link rel="stylesheet" href="css/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Teko:wght@300;500&display=swap" rel="stylesheet"> 
</head>
<body>
    <main>
        <section class="robotron">
            <img class="robo" src="img/robotron.png" alt="Robotron">
            <figcaption class="titulo">ROBOTRON <br>2000</figcaption>
        </section>

        <section class="box estatisticas">
            <div class="estatistica">
                <p class="estatistica-titulo">Força</p>
                <div class="estatistica-valor">
                    <p class="estatistica-numero">768</p>
                </div>
            </div>
            <div class="estatistica">
                <p class="estatistica-titulo">Poder</p>
                <div class="estatistica-valor">
                    <p class="estatistica-numero">630</p>
                </div>
            </div>
            <div class="estatistica">
                <p class="estatistica-titulo">Energia</p>
                <div class="estatistica-valor">
                    <p class="estatistica-numero">289</p>
                </div>
            </div>
            <div class="estatistica">
                <p class="estatistica-titulo">Velocidade</p>
                <div class="estatistica-valor">
                    <p class="estatistica-numero">597</p>
                </div>
            </div>
        </section>

        <section class="equipamentos">
            <form action="" class="montador">
                <div class="box montador-conteudo">
                    <div class="peca">
                        <label for="" class="peca-titulo">Braços</label>
                        <div class="controle">
                            <buttom class="controle-ajuste">-</buttom>
                            <input type="text" class="controle-contador" value="00" id="braco">
                            <buttom class="controle-ajuste">+</buttom>
                        </div>
                    </div>
                    <hr class="linha">
                    <div class="peca">
                        <label for="" class="peca-titulo">Blindagem</label>
                        <div class="controle">
                            <buttom class="controle-ajuste">-</buttom>
                            <input type="text" class="controle-contador" value="00">
                            <buttom class="controle-ajuste">+</buttom>
                        </div>
                    </div>
                    <hr class="linha">
                    <div class="peca">
                        <label for="" class="peca-titulo">Núcleos</label>
                        <div class="controle">
                            <buttom class="controle-ajuste">-</buttom>
                            <input type="text" class="controle-contador" value="00">
                            <buttom class="controle-ajuste">+</buttom>
                        </div>
                    </div>
                    <hr class="linha">
                    <div class="peca">
                        <label for="" class="peca-titulo">Pernas</label>
                        <div class="controle">
                            <buttom class="controle-ajuste">-</buttom>
                            <input type="text" class="controle-contador" value="00">
                            <buttom class="controle-ajuste">+</buttom>
                        </div>
                    </div>
                    <hr class="linha">
                    <div class="peca">
                        <label for="" class="peca-titulo">Foguetes</label>
                        <div class="controle">
                            <buttom class="controle-ajuste">-</buttom>
                            <input type="text" class="controle-contador" value="00">
                            <buttom class="controle-ajuste">+</buttom>
                        </div>
                    </div>
                </div>
                <input type="submit" value="Iniciar produção" class="producao" id="producao">
            </form>
        </section>
    </main>

    <script src="js/main.js"></script>
</body>
</html>

Olá! Tudo bem?

Pelo código que você postou, parece que tem um erro de digitação na linha da funcçao manipulaDados, dentro do forEach, tem a palavra textContext escerita com o "X", mas na verdade é com "N" Content, ou seja, textContent, veja essa linha corrigida:

manipulaDados(evento.target.textContent, evento.target.parentNode)

Espero ter ajudado e bons estudos!

Olá!

Dei uma olhada no seu código e demorei bastante pra entender o que tinha acontecido, pois ele está igual ao disponibilizado no Github do curso. Isso foi o que eu consegui analisar:

Se você prestar atenção, a página que está disponível no Github do curso também está com problemas na subtração. Só funciona a adição. O que tá acontecendo é que ao invés da tag button você escreveu buttom, com m no final. Isso tá causando um problema porque ele não reconhece o conteúdo de texto dentro dessa tag, uma vez que ela não existe no contexto do HTML. Então, ele retorna como "undefined". E por que a adição funciona? Porque no seu condicional diz que todo caso que não for "===" a "-" deve somar, e no caso "undefined" é considerado como não sendo "===" a "-".

Em tese, resolvendo esse problema o seu código deveria funcionar tranquilamente. Porém, quando você ajeita a questão do button surge uma outra questão. Como o botão está dentro do form, por padrão toda vez que você clicar nele, a página vai ser atualizada e você vai perder seus valores do robô.

Pra resolver isso, você tem que colocar dentro do seu código um preventDefault() para impedir que isso aconteça:

const controle = document.querySelectorAll(".controle-ajuste")

controle.forEach( (elemento) => {
    elemento.addEventListener("click", (evento) => {
        evento.preventDefault();
          manipulaDados(evento.target.textContext, evento.target.parentNode)               
    })
})

Com isso, acredito que seu código funcione da maneira correta. Espero ter ajudado.

Não funcionou.

Você juntou a minha resposta com a do Renan? Se sim, tenta dar uma revisada no código pra ver se não tem algum errinho de digitação ou coisa do tipo. Aqui quando eu apliquei as duas respostas funcionou bem.

Qualquer coisa compartilha teu código de novo pra gente ajudar a achar esse errinho :)

Muito obrigado, graças a sua dúvida e as pessoas que responderam aqui conseguir sanar meu problema, foi apenas um erro de digitação, quando digitei evento.target.parentNode o parent foi sem o "n" (paretNode), acabou passando despercebido por mim, passei um tempo tentando identificar esse erro.