1

Criei uma função em javascript, porem me retorna o seguinte erro:

Cannot read property 'value' of null

Segue um pedaço do código:

function defineLetrar() {
  var obj;
  for (var i = 0; i <= 10; i++) {
    let obj = document.getElementById(`letra${i}`).value = ''
    console.log(obj)
    //obj = document.getElementById('letra'+i).style.display = 'none';
  }
}
<input type="text" name="" id="letra1" class="input-text" maxlength="1" disabled>
<input type="text" name="" id="letra2" class="input-text" maxlength="1">
<input type="text" name="" id="letra3" class="input-text" maxlength="1">
<input type="text" name="" id="letra4" class="input-text" maxlength="1">
<input type="text" name="" id="letra5" class="input-text" maxlength="1">
<input type="text" name="" id="letra6" class="input-text" maxlength="1">
<input type="text" name="" id="letra7" class="input-text" maxlength="1">
<input type="text" name="" id="letra8" class="input-text" maxlength="1">
<input type="text" name="" id="letra9" class="input-text" maxlength="1">
<input type="text" name="" id="letra10" class="input-text" maxlength="1">

5
  • Tá cheio de erros seu código cara, está repetindo o mesmo id para vários elementos Html e a variável obj tbm não está correta!
    – LeAndrade
    Commented 16/06/2020 às 20:50
  • O que você pretendia fazer? Pra corrigir o seu erro, basta começar o for em 1. Commented 16/06/2020 às 20:55
  • LeAndrade, por favor poderia me dizer quais erros para que eu possa consertá-los? Não vejo repetição de id para vários elementos HTML, pois cada um tem sua numeração específica, logo não é o mesmo id. Em relação a variável obj, poderia me dizer o que está errado? Commented 16/06/2020 às 21:15
  • Provavelmente eu que devo ter visto errado mesmo a questão do id. Agora realmente na declaração da variável obj não sei se mais para frente isso possa resultar em erro let obj = .... .value = .... ao manipular essa variável, nunca vi em literatura nenhuma a respeito desse tipo de declaração em Javascript.
    – LeAndrade
    Commented 16/06/2020 às 21:31
  • Só é manipulado o .value dentro do laço For. Commented 16/06/2020 às 22:54

1 Resposta 1

1

O problema é que você faz um loop de 0 até dez e tenta manipular um objeto que não existe...

No caso, letra0 e seu html só possui o item a partir do letra1. Basta corrigir o seu for.

function defineLetrar() {
  for (var i = 1; i <= 10; i++) {
    let obj = document.getElementById(`letra${i}`).value = ''
    console.log(obj)
    //obj = document.getElementById('letra'+i).style.display = 'none';
  }
}
<input type="text" name="" id="letra1" class="input-text" maxlength="1" disabled>
<input type="text" name="" id="letra2" class="input-text" maxlength="1">
<input type="text" name="" id="letra3" class="input-text" maxlength="1">
<input type="text" name="" id="letra4" class="input-text" maxlength="1">
<input type="text" name="" id="letra5" class="input-text" maxlength="1">
<input type="text" name="" id="letra6" class="input-text" maxlength="1">
<input type="text" name="" id="letra7" class="input-text" maxlength="1">
<input type="text" name="" id="letra8" class="input-text" maxlength="1">
<input type="text" name="" id="letra9" class="input-text" maxlength="1">
<input type="text" name="" id="letra10" class="input-text" maxlength="1">

Mas se o seu objetivo é "limpar" esses campos, existem maneiras mais corretas e eficientes para isso. Um simples reset no form ou então um seletor mais adequado.

var defineLetra = function() {
  let campos = document.getElementsByName('letra[]')
  campos.forEach((item) => {
    item.value = 'a';
  });
};

var resetar = function() {
  document.getElementById("palavra").reset();
}
<form id="palavra">
  <input type="text" name="letra[]" id="letra1" class="input-text" maxlength="1" disabled>
  <input type="text" name="letra[]" id="letra2" class="input-text" maxlength="1">
  <input type="text" name="letra[]" id="letra3" class="input-text" maxlength="1">
  <input type="text" name="letra[]" id="letra4" class="input-text" maxlength="1">
  <input type="text" name="letra[]" id="letra5" class="input-text" maxlength="1">
  <input type="text" name="letra[]" id="letra6" class="input-text" maxlength="1">
  <input type="text" name="letra[]" id="letra7" class="input-text" maxlength="1">
  <input type="text" name="letra[]" id="letra8" class="input-text" maxlength="1">
  <input type="text" name="letra[]" id="letra9" class="input-text" maxlength="1">
  <input type="text" name="letra[]" id="letra10" class="input-text" maxlength="1">
  <form>
    <br>
    <a onclick="defineLetra()" href="#">define letra</a> &nbsp;|&nbsp;
    <a onclick="resetar()" href="#">resetar</a>

1
  • Muito obrigado, amigo! Resolveu meu problema! Commented 16/06/2020 às 21:01

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 .