Cannot read Property 'value' of null

Asked

Viewed 57 times

1

I created a function in javascript, but it returns me the following error:

Cannot read Property 'value' of null

Follow a piece of code:

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">

javascript

  • It’s full of mistakes your code guy, is repeating the same id for various Html elements and the variable obj tbm is not correct!

  • What did you intend to do? To correct your mistake, just start at 1.

  • Leandrade, would you please tell me what mistakes I have made so I can fix them? I don’t see repetition of id for several HTML elements, because each one has its specific numbering, so it’s not the same id. Regarding the variable obj, could you tell me what is wrong?

  • Probably I who must have seen wrong even the issue of id. Now really in the statement of the variable obj I don’t know if further on this can result in error Let obj = .... . value = .... when manipulating this variable, I have never seen in any literature regarding this type of statement in Javascript.

  • Only the .value inside the For loop.

1 answer

1


The problem is that you loop from 0 to 10 and try to manipulate an object that doesn’t exist...

In the case, letra0 and your html only has the item from the letra1. Just fix your 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">

But if your goal is to "clear" these fields, there are more correct and efficient ways to do this. A simple reset to the form or a more suitable selector.

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>

  • Thank you very much, friend! Solved my problem!

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.