6
respostas

js nao esta funcionando

The label's for attribute doesn't match any element id. This might prevent the browser from correctly autofilling the form and accessibility tools from working correctly. To fix this issue, make sure the label's for attribute references the correct id of a form field. quando aperto nos botoes nao roda os numeros, ou seja valores como +1 ou -1, essa é a mesagem que aparece quando inspeciono a pagina. ja fui no meu codigo em html tentar mudar a função do label mas não acontece nada .

div class="peca"> Braços

6 respostas

Opa Suporte, tudo bem?

Poderia por gentileza em enviar o seu projeto completo? Dessa forma posso analisar o seu código na totalidade e simular o problema para ajudá-lo de forma mais assertiva.

Você pode compartilhar o link do seu projeto via Github.

Fico à disposição.

Tenha um bom dia e bons estudos.

https://github.com/janynyb1/testerobotron link do meu github com o projeto ! obrigada!

Olá Suporte.

Analisei seu código e percebi alguns pontos que podem estar impedindo o funcionando do projeto como desejado:

  • Uso da const peca - na nossa função manipulaDados() inicialmente para testes usamos o braco como medida para testar o funcionamento do nosso código, porém depois usamos o valor da própria constante peca, por englobar várias peças, sendo assim mudamos braco.value para peca.value:
if(operacao === "-") {
    peca.value = parseInt(braco.value) - 1
} else {
    peca.value = parseInt(braco.value) + 1
}
}
  • manipulaDados() e atualizaEstatistica(): Para mantermos as nossa estatísticas atualizadas, além da criação da função precisamos aplica-la, nesse caso precisamos precisamos adicionar no nosso forEach. Além disso, como estamos usando data atributtes para identificar as operações de soma e diminuição, precisamos especificar no manipulaDados().
controle.forEach( (elemento) => { 
    elemento.addEventListener("click", (evento) => {
        manipulaDados(evento.target.textContent, evento.target.parentNode)

    })
})

Sendo assim, precisamos extrair na manipulaDados() do data atributte e implementar o uso de atualizaEstatistica():

manipulaDados(evento.target.dataset.controle, evento.target.parentNode)
atualizaEstatistica(evento.target.dataset.peca);
  • data-peca: nesse caso, como estamos no evento de click coletando o dataset desse componente é importante esclarecermos de qual parte cada + e - estão sendo usados:
<div class="peca">
        <label for="" class="peca-titulo">Braços</label>
        <div class="controle">
               <button class="controle-ajuste" data-controle="-">-</button>
               <input type="text" class="controle-contador" value="00" data-contador>        
              <button class="controle-ajuste" data-controle="+">+</button>
        </div>
</div>

Segue o código alterado com as mudanças:

<div class="peca">
         <label for="" class="peca-titulo">Braços</label>
         <div class="controle">
               <buttom class="controle-ajuste" data-controle="-" data-peca="bracos" >-</buttom>
               <input type="text" class="controle-contador" value="00" data-contador>
               <buttom class="controle-ajuste" id="somar" data-controle="+" data-peca="bracos">+</buttom>
         </div>
</div>
  • Outro ponto importante é quanto a alteração dos dados na tela, a constante que armazena os dados da data-estatistica é criada no javascript, porém precisamos declarar esse data-atributte no html, onde eles serão retirados como mostra o exemplo abaixo:
<p class="estatistica-numero" data-estatistica="energia">289</p>

Prontinho! Acredito que dessa forma o código vai estar funcionando como desejado. Lembre-se sempre de testar o seu código com o andamento das atividades, continue estudando e se dedicando para ir cada vez mais longe.

Se precisar de ajuda ou tiver alguma dúvida, estou à disposição, conte comigo!

Um bom dia e bons estudos

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓

fiz as alterações mas quando aperto nas labels, botoes a pagina recarrega e sai o valor que inserimos .

A form field element has neither an id nor a name attribute. This might prevent the browser from correctly autofilling the form. To fix this issue, add a unique id or name attribute to a form field. This is not strictly needed, but still recommended even if you have an autocomplete attribute on the same element.

The label's for attribute doesn't match any element id. This might prevent the browser from correctly autofilling the form and accessibility tools from working correctly. To fix this issue, make sure the label's for attribute references the correct id of a form field. aparecendo como erro no console.

Opa Suporte.

Refiz as alterações no código e está funcionando certinho, único ponto que pude perceber é o uso da tag button, o código original utiliza “buttom” com m, o que acaba divergindo da solução acima, criando o erro de recarregar ao clicar no botão.

Por enquanto usemos buttom para permanecer verossímil a aula, agradeço a ajuda em identificar esse problema, iremos averiguar o uso do “buttom” para melhorar o código-fonte.

Fico à disposição.

Um bom dia e bons estudos.