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> |
<a onclick="resetar()" href="#">resetar</a>