Cannot set Property 'innerHTML' of null

Asked

Viewed 16,529 times

0

I tested the code below and returned me the error: 

p1-rad1-RE_UP.html:35 Uncaught TypeError: Cannot set property 'innerHTML' of null
  at Object.listarTodos (p1-rad1-RE_UP.html:35)
  at p1-rad1-RE_UP.html:100
  p1-rad1-RE_UP.html:35 Uncaught TypeError: Cannot set property 'innerHTML' of null
  at Object.listarTodos (p1-rad1-RE_UP.html:35)
  at Object.add (p1-rad1-RE_UP.html:58)
  at HTMLFormElement.onsubmit (p1-rad1-RE_UP.html:7)

What can it be?

var cadastro = new function() {
  this.veiculos = [];
  this.el = document.getElementById("veiculos");
  this.itemEditar = -1;

  this.listarTodos = function() {
    var dados = '';

    if (this.veiculos.length > 0) {
      for (i = 0; i < this.veiculos.length; i++) {
        dados += '<tr>';
        dados += '<td>' + this.veiculos[i] + '</td>';
        dados += '<td><button onclick="cadastro.alterar(' + i + ')"> Alterar </button></td>';
        dados += '<td><button onclick="cadastro.excluir(' + i + ')"> Excluir </button></td>';
        dados += '</tr>';
      }
    }
    this.el.innerHTML = dados;
  };

  this.add = function() {
    var id;
    id++;
    var placa = document.getElementById("add-placa").value;
    var marca = document.getElementById("add-marca").value;
    var modelo = document.getElementById("add-modelo").value;

    if (placa && marca && modelo) {
      if (this.itemEditar == -1) {
        this.veiculos.push(id);
        this.veiculos.push(placa);
        this.veiculos.push(marca);
        this.veiculos.push(modelo);
      } else {
        this.veiculos.splice(this.itemEditar, 1, id);
        this.veiculos.splice(this.itemEditar, 2, placa.trim());
        this.veiculos.splice(this.itemEditar, 3, marca.trim());
        this.veiculos.splice(this.itemEditar, 4, modelo.trim());
        this.itemEditar = -1;
      }
      this.listarTodos();
    }

    this.novo();
  };

  this.editar = function(item) {
    this.itemEditar = item;
    var placa = this.veiculos[item];
    var marca = this.veiculos[item];
    var modelo = this.veiculos[item];
    if (placa && marca && modelo) {
      var elPlaca = document.getElementById("add-placa");
      var elMarca = document.getElementById("add-marca");
      var elModelo = document.getElementById("add-modelo");
      elPlaca.value = placa;
      elMarca.value = marca;
      elModelo.value = modelo;
    }
  };

  this.novo = function() {
    this.itemEditar = -1;
    var elId;
    var elMarca = document.getElementById("add-marca");
    var elPlaca = document.getElementById("add-placa");
    var elModelo = document.getElementById("add-modelo");

    elId.value = this.elId + 1;
    elMarca.value = '';
    elPlaca.value = '';
    elModelo.value = '';
  };

  this.excluir = function(item) {
    this.veiculos.splice(item, 1);
    this.listarTodos();
  };

}

function fechar() {
  document.getElementById("mostrar").style.display = 'none';
};
cadastro.listarTodos();
<html>

<head>
  <meta charset="utf-8">
  <title>RAD I</title>
</head>

<body>
  <form action="javascript:void(0);" method="POST" onsubmit="cadastro.add()">
    <input type="text" id="add-placa" placeholder="Placa">
    <input type="text" id="add-marca" placeholder="Marca">
    <input type="text" id="add-modelo" placeholder="Modelo">
    <input type="submit" value="Salvar">
    <p>
      <input type="text" id="add-placa" placeholder="Placa">
      <input type="submit" name="buscar" value="Buscar">
  </form>
</body>

</html>

javascript html array oop

2 answers

3


Well, the error can’t be more descriptive than that. You just need to know how to look for the problem.

See the error:

Cannot set Property 'innerHTML' of null

Which part of the code tries to set the property innerHTML of something?

Fortunately there’s only one here

this.el.innerHTML = dados;

So where is it this.el is being initialized?

Here

this.el = document.getElementById("veiculos");

So the problem is that the return of getElementById is being null.

Let’s search for the element with this id in HTML.

<form>
  <input id="add-placa">
  <input id="add-marca">
  <input id="add-modelo">
  <input>
  <p>
    <input id="add-placa">
    <input>
</form>

No. There’s the mistake.

  • but the vehicles do not access the vector?

  • What vector are you talking about?

  • forget it, I could solve it, only there’s another problem, it prints wrong, it prints everything separately, I wanted it to be in a single line, for example: hyt-2345 fiat uno - edit delete

  • Well, you can open another question to solve this problem @Antonygabriel

  • By the way, you can always mark some answer as correct in your questions using the V on the left side of the @Antonygabriel response

  • Okay, that’s it, thank you

Show 1 more comment

0

its code has some errors, besides trying to access elements that do not exist, as "#veiculos", is trying to access elements outside its scope.

Below is a reworked version;

var Cadastro = function () {
  this.tabela = document.getElementById("veiculos");
  this.formulario = document.getElementById("formulario");
  this.addPlaca = document.getElementById("addPlaca");
  this.addMarca = document.getElementById("addMarca");
  this.addModelo = document.getElementById("addModelo");  
  this.salvar = document.getElementById("salvar");
  
  this.searchPlaca = document.getElementById("searchPlaca");
  this.buscar = document.getElementById("buscar");
  
  this.salvar.addEventListener("click", this.onSalvarClick.bind(this));
  this.buscar.addEventListener("click", this.onBuscarClick.bind(this));
  
  var template = document.getElementById("tmpl-veiculo").textContent;
  this.template = Handlebars.compile(template);
  this.Veiculos = [];
} 

Cadastro.prototype.onSalvarClick = function (event) {
  event.preventDefault();
  var isValid = this.formulario.checkValidity();
  if (!isValid) 
    return alert("Todos os Campos são obrigatorios");
  
  var veiculo = {};
  veiculo.Placa = this.addPlaca.value;
  veiculo.Marca = this.addMarca.value;
  veiculo.Modelo = this.addModelo.value;
  
  var tabela = document.createElement("table");
  tabela.innerHTML = this.template(veiculo);
  var linha = tabela.rows[0];  
  this.tabela.appendChild(linha);
  var veiculo = new Veiculo(this, linha);
  this.Veiculos.push(veiculo);
}

Cadastro.prototype.onBuscarClick = function (event) {
  event.preventDefault();
  var that = this;
  this.Veiculos.forEach(function (veiculo, indice) {
    var pattern = that.searchPlaca.value;
    var valor = veiculo.Placa.span.textContent;
    var isVisible = valor.indexOf(pattern) !== -1;
    veiculo.wrapper.classList.toggle("hide", !isVisible);
  });  
}

var Veiculo = function (cadastro, elem) {
  this.cadastro = cadastro;
  this.wrapper = elem;
  this.Placa = new Field(this, "Placa");
  this.Marca = new Field(this, "Marca");
  this.Modelo = new Field(this, "Modelo");
  
  this.editar = this.wrapper.querySelector(".editar");
  this.salvar = this.wrapper.querySelector(".salvar");
  this.excluir = this.wrapper.querySelector(".excluir");
  this.cancelar = this.wrapper.querySelector(".cancelar");
  
  this.editar.addEventListener("click", this.onEditarClick.bind(this));
  this.salvar.addEventListener("click", this.onSalvarClick.bind(this));
  this.excluir.addEventListener("click", this.onExcluirClick.bind(this));
  this.cancelar.addEventListener("click", this.onCancelarClick.bind(this));
}

Veiculo.prototype.onEditarClick = function (event) {
  this.wrapper.classList.add("edicao");
}

Veiculo.prototype.onSalvarClick = function (event) {
  this.Placa.span.textContent = this.Placa.input.value;
  this.Marca.span.textContent = this.Marca.input.value;
  this.Modelo.span.textContent = this.Modelo.input.value;
  this.wrapper.classList.remove("edicao");
}

Veiculo.prototype.onExcluirClick = function (event) {
  var index = this.cadastro.Veiculos.indexOf(this);
  this.cadastro.Veiculos.splice(index, 1);
  this.cadastro.tabela.removeChild(this.wrapper);
}

Veiculo.prototype.onCancelarClick = function (event) {
  this.Placa.input.value = this.Placa.span.textContent;
  this.Marca.input.value = this.Marca.span.textContent;
  this.Modelo.input.value = this.Modelo.span.textContent;
  this.wrapper.classList.remove("edicao");
}

var Field = function (veiculo, nome) {
  this.veiculo = veiculo;
  this.wrapper = this.veiculo.wrapper.querySelector("[data-field='" + nome + "']");
  this.span = this.wrapper.querySelector("span");
  this.input = this.wrapper.querySelector("input");
}

new Cadastro();
#veiculos tr.hide {
  display: none;
}

#veiculos tr span{
  display: block;
}

#veiculos tr input[type='text']{
  display: none
}

#veiculos tr input[type='button']:first-child{
  display: block;
}

#veiculos tr input[type='button']:last-child{
  display: none;
}

#veiculos tr.edicao span{
  display: none;
}

#veiculos tr.edicao input[type='text']{
  display: block
}

#veiculos tr.edicao input[type='button']:first-child{
  display: none;
}

#veiculos tr.edicao input[type='button']:last-child{
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.js"></script>
<html>

<body>
  <form id="formulario" action="#" method="POST" >
    <input type="text" id="addPlaca" required placeholder="Placa">
    <input type="text" id="addMarca" required placeholder="Marca">
    <input type="text" id="addModelo" required placeholder="Modelo">
    <input type="submit" id="salvar" name="salvar" value="Salvar">
    <p>
      <input type="text" id="searchPlaca" placeholder="Placa">
      <input type="submit" id="buscar" name="buscar" value="Buscar">
  </form>
  <table>
    <thead>
      <tr>
        <th>Placa</th>
        <th>Marca</th>
        <th>Modelo</th>
        <th></th>
        <th></th>
      </tr>
    </thead>
    <tbody id="veiculos">
    </tbody>
  </table>
  <script id="tmpl-veiculo" type="text/x-handlebars-template">
  <tr>
    <td data-field="Placa">
      <span>{{Placa}}</span>
      <input type="text" value="{{Placa}}" />
    </td>
    <td data-field="Marca">
      <span>{{Marca}}</span>
      <input type="text" value="{{Marca}}" />
    </td>
    <td data-field="Modelo">
      <span>{{Modelo}}</span>
      <input type="text" value="{{Modelo}}" />
    </td>
    <td>
      <input type="button" class="editar" value="Editar" />
      <input type="button" class="salvar" value="Salvar" />
    </td>
    <td>
      <input type="button" class="excluir" value="Excluir" />
      <input type="button" class="cancelar" value="Cancelar" />
    </td>
  </tr>
  </script>
</body>

</html>

Browser other questions tagged javascript html array oop

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