Problemas com inserção valores em array de cadastro?

10 de abril de 2017 9 respostas Resolvido

otavioshiro 10 de abril de 2017

Estou com problemas na criação de um vetor JScript para solucionar a inserção de dados de um objeto JScript. Preciso mostrar em uma tela e não consigo fazer aparecer nada.
O exercício que estou fazendo tem esse enunciado.

Funcionalidade: Campos do objeto Veiculo: (id, placa , marca, modelo )
Realizar o cadastro do veículo gerando o ID automaticamente com um numero auto incrementado. Os veiculos devem ser armazenados em um array.
Campos de entrada: nome, placa, marca
Mensagem: Veículo cadastrado com sucesso!
Após cadastrado a lista de veículos deve ser atualizada no DOM (exibe na tela)

Se alguém puder me dar uma luz eu agradeço

9 Respostas

Dragoon 10 de abr. de 2017

Já fez algum código?

otavioshiro 10 de abr. de 2017

sim

Dragoon 10 de abr. de 2017

Fornece o código! a função primordial do forum é tirar duvidas!

otavioshiro 10 de abr. de 2017

O código que tenho até o momento é o que segue abaixo:

<meta charset="utf-8" />
<title> Cadastro de veículos </title>
<p>Gerenciador de cadastro de veículos</p>

<script>
    var gerenciadoDeVeiculos = new function () {
        this.veiculos = [];
        this.el = document.getElementById("veiculos");
        this.itemEditar = -1;
    }

    this.listarTodos = function () {
        var dados = '';
        var i = 0;
        if (this.veiculos.length > 0) {
            for (i = 0; i < this.veiculos.length; i++) {
                id = id +1;
                dados += '<tr>';
                dados += '<td>'+this.veiculos[i]+'</td>';
                dados += '<td><button onclick="gerenciadorDeVeiculos.salvar(' + i + ')">Salvar</button></td>';
                dados += '<td><button onclick="gerenciador.editar(' + i + ')">Editar</button></td>';
                dados += '<td><button onclick="gerenciador.excluir(' + i + ')">Excluir</button></td>';
            }
        }
        this.el.innerHTML = dados;
    }

    this.adicionar = function(){
        var carro = document.getElementById("carro").value;
        if(itemEditar == -1){
            this.veiculos.push(veiculos);
        }
    }

</script>

<form action="javascript:void(0);" method="POST" onsubmit="gerenciadorDeVeiculos.adicionar()">
    <input type="text" id="marca" placeholder="Insira a marca do veículo">
    <input type="text" id="modelo" placeholder="Insira o modelo do veículo">
    <input type="text" id="placa" placeholder="Informe a placa do veículo">
    <input type="submit" value="+">
</form>

<table>

    <thead>
        <tr>
            <th>Id | Marca | Nome | Placa</th>
        </tr>
    </thead>

</table>

Solucao aceita

Dragoon 10 de abr. de 2017

Exemplo: https://jsfiddle.net/gz173b35/

HTML

<table width="100%" border="0">
    <thead>
        <tr>            
            <th><input type="text" name="marca" id="marca" placeholder="marca"></th>
            <th><input type="text" name="nome" id="nome" placeholder="nome"></th>
            <th><input type="text" name="placa" id="placa" placeholder="placa"></th>
            <th with="25%"><button type="button" onclick="add(document.getElementById('marca'),document.getElementById('nome'), document.getElementById('placa'));"> + </button></th>
        </tr>
    </thead>
</table>
<table width="100%" border="0">
    <thead>
        <tr>
            <th>Id</th>
            <th>Marca</th>
            <th>Nome</th>
            <th>Placa</th>
        </tr>
    </thead>
    <tbody>
      
    </tbody>
</table>

Javascript:

var cars = [];

var add = function(marca, nome, placa)
{
    var id = (cars.length + 1);
	cars.push({
    'id': id,
  	'marca': marca.value,
    'nome': nome.value,
    'placa': placa.value
  });  
  load(id, marca.value, nome.value, placa.value);
  marca.value = '';
  nome.value = '';
  placa.value = '';
  alert("Veiculo cadastrado com êxito!");
  document.getElementById("marca").focus();
}

var load = function(id, marca, nome, placa)
{
  var tbody = document.getElementsByTagName('tbody')[0];
  var tr = document.createElement('tr'); 
  var td0 = document.createElement('td');
  var td1 = document.createElement('td');
  var td2 = document.createElement('td');
  var td3 = document.createElement('td');
  tr.appendChild(td0);
  tr.appendChild(td1);
  tr.appendChild(td2);
  tr.appendChild(td3);
  tbody.appendChild(tr);
  td0.innerHTML = id;
  td1.innerHTML = marca;
  td2.innerHTML = nome;
  td3.innerHTML = placa;  
}

Observação: Porque não segui seu exemplo: está confuso, fazendo coisas que não é preciso ao meu ver.

otavioshiro 10 de abr. de 2017

Bom, de tudo o que eu falei, você me ajudou em mais de 100%.
Eu vou terminar o exercício que pede pra fazer alteração, exclusão e busca.
O mais complicado era começar isso. Mas só pra saber sua opinião, eu não tenho esse conhecimento todo de JScript como você, entendi o código, mas não sei fazê-lo por mim mesmo. Irei complementá-lo com os itens que citei acima.
Você acha que é muito difícil fazer isso utilizando índices apenas laços For?
Sou iniciante e ainda estou aprendendo assim.

Dragoon 10 de abr. de 2017

O grande problema é a lógica empregada por cada um, claro, já sou programador a um certo tempo e isso me garante conhecimento prévio de uma determinada solução (mesmo eu não sendo conhecedor a fundo de Javascript), o problema também é que vocês perguntam pela metade e deveria ter relatado isso na sua pergunta também, mas, resumindo, com essa solução pode utilizar for ou pode utilizar simples igual eu fiz tudo vai depender da lógica inicial.

otavioshiro 10 de abr. de 2017

Ok, de qualquer forma muito obrigado. Eu vou ver a melhor forma.
Talvez estudar essa forma que você usou criando elementos, seja melhor e algo que ainda não aprendi no curso, mas que é de grande ajuda saber essa possibilidade.
Me ajuda muito o que me mostrou, e, obrigado por explicar como devo fazer as perguntas aqui no GUJ, sou novo aqui também.

Abraço

Dragoon 10 de abr. de 2017

Coloque tudo em relação o que precisa, e explica de maneira clara todo o problema e o objetivo a ser alcançado … !!!

Ou seja, seja simples, objetivo e coloque todo o contexto.

Criado 10 de abril de 2017

Ultima resposta 10 de abr. de 2017

Respostas 9

Participantes 2

9 Respostas

Topicos relacionados