I can not search the screen for javascript

Question

I can not search the screen for javascript

Navigation

#1 by (0 votes)

1

<html>

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

<body>
  <form action="javascript:void(0);" method="POST" onsubmit="cadastro.add()">
    <input type="text" id="addplaca" placeholder="Placa">
    <input type="text" id="addmarca" placeholder="Marca">
    <input type="text" id="addmodelo" placeholder="Modelo">
    <input type="submit" value="Salvar">
  </form>
  <!-- O ERRO É ESSE -->
  <form action="javascript:void(0);" method="POST" onsubmit="cadastro.busca()">
    <p>
      <input type="text" id="buscar" placeholder="Placa">
      <input type="submit" value="Buscar">
  </form>
  <!--              -->

  <table>
    <tr>
      <th>PLACA MARCA MODELO</th>
    </tr>
    <tbody id="veiculos">

    </tbody>
  </table>

</body>
<script>
  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].placa + '</td>';
          dados += '<td>' + this.veiculos[i].marca + '</td>';
          dados += '<td>' + this.veiculos[i].modelo + '</td>';
          dados += '<td><button onclick="cadastro.editar(' + 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;
      var placa = document.getElementById("addplaca").value;
      var marca = document.getElementById("addmarca").value;
      var modelo = document.getElementById("addmodelo").value;

      var elem = {
        id: this.id++,
        placa: placa,
        marca: marca,
        modelo: modelo
      };

      if (elem) {
        if (this.itemEditar == -1) {
          this.veiculos.push(elem);
          this.id = this.id++;
        } else {
          this.veiculos.splice(this.itemEditar, 1, elem);
          this.itemEditar = -1;
        }
        this.listarTodos();
      }
      alert("Veiculo (Re)Cadastrado com Sucesso!")
      this.novo();
    };

    this.editar = function(item) {
      this.itemEditar = item;
      var placaE = this.veiculos[item].placa;
      var marcaE = this.veiculos[item].marca;
      var modeloE = this.veiculos[item].modelo;
      if (placaE && marcaE && modeloE) {
        var elPlaca = document.getElementById("addplaca");
        var elMarca = document.getElementById("addmarca");
        var elModelo = document.getElementById("addmodelo");
        elPlaca.value = placaE;
        elMarca.value = marcaE;
        elModelo.value = modeloE;
      }
    };

    this.novo = function() {
      var elMarca = document.getElementById("addmarca");
      var elPlaca = document.getElementById("addplaca");
      var elModelo = document.getElementById("addmodelo");

      elMarca.value = '';
      elPlaca.value = '';
      elModelo.value = '';
    };

    this.excluir = function(item) {
      this.veiculos.splice(item, 1);
      this.listarTodos();
      alert("Veiculo Excluido");
    };
    //---------------------O ERRO É ESSE--------------------------------	
    this.busca = function() {
      var busca = document.getElementById("buscar");
      for (i = 0; i < this.veiculos.length; i++) {
        if (busca == this.veiculos[i].placa) {
          this.listarTodos();
        }
      }
      if (this.veiculos.length == 0) {
        alert("Veiculo Não Encontrado");
      }
    };
    //----------------------------------------------------------------------			
  };

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

</html>

When I search the board, it does not show the vehicle that I registered

javascript html

asked by anonymous 21.04.2017 / 14:59

1 answer

What is the best Design Pattern for Java Logger? Search Refinement in Android Search View

score 0 · Accepted Answer

Pass an array to the method .listarTodos , which in case it is not defined it uses all the same:

this.listarTodos = function(veiculos) {
  var dados = '';
  if (!veiculos) veiculos = this.veiculos;
  if (veiculos.length > 0) {
    for (var i = 0; i < veiculos.length; i++) {
      dados += '<tr>';
      dados += Object.keys(veiculos[i]).reduce(function(str, chave) {
        return str + '<td>' + veiculos[i][chave] + '</td>';
      }, '');
      dados += '<td><button onclick="cadastro.editar(' + this.veiculos.indexOf(veiculos[i]) + ')"> Alterar </button></td>';
      dados += '<td><button onclick="cadastro.excluir(' + this.veiculos.indexOf(veiculos[i]) + ')"> Excluir </button></td>';
      dados += '</tr>';
    }
  }
  this.el.innerHTML = dados;
};

In the busca method you filter the vehicles:

this.busca = function() {
  var busca = document.getElementById("buscar").value;
  var filtrados = this.veiculos.filter(function(veiculo) {
    return veiculo.placa == busca.value;
  });

  if (filtrados.length == 0) {
    alert("Veiculo Não Encontrado");
  } else {
    this.listarTodos(filtrados);
  }
};

Example:

Running (with data / json pre-written):

var cadastro = new function() {
  this.veiculos = [{
    placa: 'LA-00-41',
    marca: 'Renault',
    modelo: 'Renault 5'
  }, {
    placa: 'JR-54-51',
    marca: 'Renault',
    modelo: 'Renault 9 JTR'
  }];
  this.el = document.getElementById("veiculos");
  this.itemEditar = -1;

  this.listarTodos = function(veiculos) {

    if (!veiculos) veiculos = this.veiculos;
    var dados = '';

    if (veiculos.length > 0) {
      for (var i = 0; i < veiculos.length; i++) {
        dados += '<tr>';
        dados += Object.keys(veiculos[i]).reduce(function(str, chave) {
          return str + '<td>' + veiculos[i][chave] + '</td>';
        }, '');
        dados += '<td><button onclick="cadastro.editar(' + this.veiculos.indexOf(veiculos[i]) + ')"> Alterar </button></td>';
        dados += '<td><button onclick="cadastro.excluir(' + this.veiculos.indexOf(veiculos[i]) + ')"> Excluir </button></td>';
        dados += '</tr>';
      }
    } else {
      dados = '<tr><td colspan="3">Nenhum registo encontrado</td></tr>'
    }
    this.el.innerHTML = dados;
  };

  this.add = function() {
    var id;
    var placa = document.getElementById("addplaca").value;
    var marca = document.getElementById("addmarca").value;
    var modelo = document.getElementById("addmodelo").value;

    var elem = {
      id: this.id++,
      placa: placa,
      marca: marca,
      modelo: modelo
    };

    if (elem) {
      if (this.itemEditar == -1) {
        this.veiculos.push(elem);
        this.id = this.id++;
      } else {
        this.veiculos.splice(this.itemEditar, 1, elem);
        this.itemEditar = -1;
      }
      this.listarTodos();
    }
    alert("Veiculo (Re)Cadastrado com Sucesso!")
    this.novo();
  };

  this.editar = function(item) {
    this.itemEditar = item;
    var placaE = this.veiculos[item].placa;
    var marcaE = this.veiculos[item].marca;
    var modeloE = this.veiculos[item].modelo;
    if (placaE && marcaE && modeloE) {
      var elPlaca = document.getElementById("addplaca");
      var elMarca = document.getElementById("addmarca");
      var elModelo = document.getElementById("addmodelo");
      elPlaca.value = placaE;
      elMarca.value = marcaE;
      elModelo.value = modeloE;
    }
  };

  this.novo = function() {
    var elMarca = document.getElementById("addmarca");
    var elPlaca = document.getElementById("addplaca");
    var elModelo = document.getElementById("addmodelo");

    elMarca.value = '';
    elPlaca.value = '';
    elModelo.value = '';
  };

  this.excluir = function(item) {
    this.veiculos.splice(item, 1);
    this.listarTodos();
    alert("Veiculo Excluido");
  };
  this.busca = function(busca) {
    if (!busca) return this.listarTodos();
    var busca = document.getElementById("buscar").value;
    var filtrados = this.veiculos.filter(function(veiculo) {
      return veiculo.placa.indexOf(busca) != -1;
    });

    this.listarTodos(filtrados);

  };
}

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

<form action="javascript:void(0);" method="POST" onsubmit="cadastro.add()">
  <input type="text" id="addplaca" placeholder="Placa">
  <input type="text" id="addmarca" placeholder="Marca">
  <input type="text" id="addmodelo" placeholder="Modelo">
  <input type="submit" value="Salvar">
</form>
<section><label>Busca: </label>
  <input type="text" id="buscar" oninput="cadastro.busca(this.value)" placeholder="Placa">

</section>
<table>
  <tr>
    <th>PLACA MARCA MODELO</th>
  </tr>
  <tbody id="veiculos">

  </tbody>
</table>