Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Acessar Elemento pela class utilizando query.Selector.bind()

Estou tentando acessar o value de uma tag radio utilizando as técnicas aprendidas, mas tenho encontrado problemas, alguém pode me ajudar?

Segue o código:


 <div class="radio">
                            <label>
                                <input class="valoracao" checked data-tipo ="consulta" value="0" type="radio" name="limite_valoracao"> Menor que R$ 300,00
                            </label>
                          </div>
                            <div class="radio">
                            <label>
                                <input class="valoracao" data-tipo ="consulta" value="1" type="radio" name="limite_valoracao"> Maior que R$ 300,00
                            </label>
                          </div>

<script>
 let $ = document.querySelector.bind(document);
this._limite_valoracao  = $(".valoracao"); //Limite da valoração
console.log(this._limite_valoracao.value);
</script>
3 respostas

Caio,

Explique melhor o problema que esta enfrentando, pois testei seu código e no console do navegador retorna o valor do primeiro elemento radio

Caro Wéllingthon Morra de Souza, muito obrigado por me ajuda. Vou tentar explicar melhor o meu problema, eu estou tentando criar um formulário onde possuo vários elementos destintos entre eles os elementos radios que utilizo para verificar a valoração de uma consulta. Até então eu estou conseguindo trabalhar normalmente com todos os outros elementos e os acesso sem nenhum problema, mas não estou obtendo o mesmo resultado com o elemento radio , pois quando seleciono o segundo elemento o outro valor não é retornado, o que aparece pra mim no console é sempre o valor do primeiro.

Grato.

 <div class="radio">
                            <label>
                                <input class="valoracao" checked data-tipo ="consulta" value="0" type="radio" name="limite_valoracao"> Menor que R$ 300,00
                            </label>
                          </div>
                            <div class="radio">
                            <label>
                                <input class="valoracao" data-tipo ="consulta" value="1" type="radio" name="limite_valoracao"> Maior que R$ 300,00
                            </label>
</div>
<script>
class TesteController {
   constructor(){
      let $ = document.querySelector.bind(document);
     this._limite_valoracao  = $(".valoracao"); 
   }
   cadastrar(){
      console.log("Cadastrando Dados");
      console.log(this._limite_valoracao.value);
   }
}
var teste = new TesteController();
teste.cadastrar();
</script>
solução!

Caio,

Agora entendi o problema, bom vamos lá, ao utilizar querySelector() o mesmo retorna o primeiro elemento no grupo do seletor informado, no seu caso: .valoracao.

Para retornar todos os elementos, utilize querySelectorAll() pois ele retorna uma lista de todos os elementos no grupo do seletor informado.

Então a solução é:

let $ = document.querySelectorAll.bind(document);

Veja:

Referências:

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software