I got this error and I don't know what it is:
jQuery.Deferred exception: Cannot set properties of undefined (setting 'innerHTML') TypeError: Cannot set properties of undefined (setting 'innerHTML') at HTMLTableRowElement.
Uncaught TypeError: Cannot set properties of undefined (setting 'innerHTML') at HTMLTableRowElement.
It appears to me in the script of my view which has a table, which retrieves data from the controller with a hidden input. All of that makes it good.
This is the input that receives the values:
<input type="hidden" id="valoresParametros" name="valoresParametros" value="@ViewBag.valoresParametros" />
This is the code that gives me an error:
<script>
$(document).ready(function () {
let mods = $('#valoresParametros').val().split(',');
console.log(mods.length);
console.log(mods);
if (mods) {
$('#mytable').find('tr.datos').each(function () {
for (let i = 0; i < mods.length; i++) {
if (mods[i] != null) {
$(this).find("td.valor")[i].innerHTML = mods[i];
} else {
$(this).find("td.valor")[i].innerHTML = " ";
}
}
});
}
})
</script>
the hidden input retrieves the values well for me.
Here what I do (or try to do) is that the values of the hidden input are loaded in the corresponding cell of the table, I only use a single column, the only thing that changes is the row
if (mods[i] != null) {
$(this).find("td.valor")[i].innerHTML = mods[i];
}
I attach <tbody> </tbody>
it in case you want to see it:
<tbody>
@foreach (var p in Model)
{
<tr class="datos">
<td style="text-align: center">@p.Parametros.Modulos.Nombre</td>
<td style="text-align: center">@p.Parametros.Nemonico</td>
<td id="@p.CanalId" style="text-align: center">@p.Canales.Nombre</td>
<td class="valor" name="ValorDefault" id="@p.ParametroId @p.CanalId" style="text-align: center" contenteditable="true"></td>
<td><button type="button" name="boton" id="@p.CanalId @p.ParametroId" value="@p.ValorDefault" class="btn btn-primary pull-right" contenteditable="false" onclick="AgregarValor('@p.ValorDefault', @p.ParametroId, @p.CanalId)">Default</button></td>
</tr>
}
</tbody>
The error occurs because this inside an anonymous function creates a new scope so you are not using $(this) from the scope that surrounds the function but from a new one, you could overcome that error by using .bind(this) at the end of the anonymous function, however I'm not sure if that will work (since you seem to use jquery and I don't know it very well)
Since I don't know much about jQuery, what you should use in my opinion is the following, change the code below the line that compares if mods[i] is null
$(this)
to$('#mytable')
.