-1

Eu testei o código abaixo e me retornou o erro:

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)

O que pode ser?

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>

3 Respostas 3

5

Bem, o erro não tem como ser mais descritivo que isto. Você só precisa saber como procurar o problema.

Veja o erro:

Cannot set property 'innerHTML' of null

Qual parte do código tenta setar a propriedade innerHTML de algo?

Felizmente é só uma, aqui

this.el.innerHTML = dados;

Então, onde que é this.el está sendo inicializado?

Aqui

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

Então o problema é que o retorno de getElementById está sendo null.

Vamos procurar pelo elemento com este Id no HTML.

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

Não tem. Está aí o erro.

6
  • mas o veiculos nao acessa o vetor? Commented 20/04/2017 às 18:55
  • De que vetor você tá falando?
    – Jéf Bueno
    Commented 20/04/2017 às 18:56
  • esqueçe, consegui resolver, só que tem outro problema, ele imprime de forma errada, ele imprime tudo separado, eu queria que ficasse numa unica linha, por exemplo: hyt-2345 fiat uno - editar excluir Commented 20/04/2017 às 19:20
  • Bem, você pode abrir outra pergunta pra resolver este problema @AntonyGabriel
    – Jéf Bueno
    Commented 20/04/2017 às 19:23
  • Aliás, você sempre pode marcar alguma resposta como correta nas suas perguntas usando o V do lado esquerdo da resposta @AntonyGabriel
    – Jéf Bueno
    Commented 20/04/2017 às 19:26
1

seu codigo tem alguns erros, além de tentar acessar elementos que não existem, como "#veiculos", está tentando acessar elementos fora do seu escopo.

Segue abaixo uma versão reformulada;

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>

-5

Adicionei esse if com comparativo != null e deu certo

if ( ((document.getElementById("cidada")) && (document.getElementById("Sortaluno"))) != null ){
        numero = document.getElementById("cidada").innerHTML; 
        numero2 = document.getElementById("cidada").innerHTML; 
        document.getElementById("cidada").innerHTML = "";
        document.getElementById("Sortaluno").innerHTML = numero; 
        }

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .