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

Front-end JavaScript
#1

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

#2

Já fez algum código?

#3

sim

#4

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

#5

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>
#6

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.

#7

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.

#8

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.

#9

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

#10

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.

#11