1

Estou tentando utilizar um código para obter o valor do radio button selecionado e estou me deparando com os seguintes erros:

A propriedade 'checked' não existe no tipo 'HTMLElement'.

A propriedade 'value' não existe no tipo NodeListOf<HTMLElement>.

Segue meu código :

getRadioValor(name){
  var rads = document.getElementsByName(name);

  for(var i = 0; i< rads.length; i++){
    if(rads[i].checked){
      return rads.value;
    }
  }
}

Qual o motivo desses erros ? E como resolver ?

2

2 Respostas 2

1

Uma forma simples que utilizo para pegar o valor checado de radios com mesmo name em Javascript puro é assim:

getRadioValor(name){
  const radioValue = document.querySelector(`input[name = ${name}]:checked`).value;
  console.log(radioValue);
}

Como você está utilizando o angular-material você deve fazer no evento change do <mat-radio-button>, dessa forma:

<mat-radio-button nome="R0" class="margem" value="1" (change)="getRadioValor($event)"
  0
</mat-radio-button>

E o método fica assim:

getRadioValor(event) {
 console.log(event.value)
}
10
  • está dando erro no .value : "A propriedade 'value' não existe no tipo 'Element'. Por algum motivo a propriedade .value não é reconhecido no meu arquivo, saberia o por que ? 9/11/2018 às 16:05
  • querySelector retorna um Element porque ele não sabe o que está vindo na query, faça um cast, assim: (document.querySelector(input[name = ${name}]:checked) as HTMLInputElement).value; 9/11/2018 às 16:28
  • Certo, resolveu o erro do .value, porém, agora quando eu seleciono o radio button e chamo o método getRadioValor, o meu formulário da o seguinte erro : ERROR TypeError: Cannot read property 'value' of null 9/11/2018 às 16:35
  • Ele irá dar esse retorno caso não encontre nenhum valor checado, isso inclusive é algo que você precisa tratar depois, mas até quando possui um checado ele continua dando o erro? 9/11/2018 às 16:37
  • Sim, estou chamando o método no evento (click) do meu radio button, assim se ele for selecionado o método é chamado. 9/11/2018 às 16:43
0

A propriedade 'checked' não existe no tipo 'HTMLElement'.

Significa que o name que você passou não retornou elementos do tipo radio ou checkbox (são os que contém a propriedade checked). Verifique se não existem outros elementos com o mesmo name.

A propriedade 'value' não existe no tipo NodeListOf.

Você esqueceu o [i] para acessar um elemento do NodeList e acabou tentando acessar a propriedade value de NodeList ao invés do HTMLElement. Basta mudar:

return rads.value;

Para:

return rads[i].value;

Segue um exemplo funcional:

function getRadioValue(name) {
  let radios = document.querySelectorAll(`input[name=${name}]`);
  
  for (let i=0, l=radios.length ; i<l ; i++) {
    let radio = radios[i];
    
    if (radio.checked) return radio.value;
  }
  
}


let btn = document.querySelector('#btn');

btn.addEventListener('click', () => {
  console.log(getRadioValue('teste'));
});
<label>
  <input type="radio" name="teste" value="1">
  Radio 1
</label>

<label>
  <input type="radio" name="teste" value="2">
  Radio 2
</label>

<label>
  <input type="radio" name="teste" value="3">
  Radio 3
</label>

<br>

<button id="btn">Log selected</button>

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .