Fala Devs! Estou com uma dificuldade em relação a um pequeno projeto que estou fazendo, o tema é sobre estacionamento, onde eu precisaria instanciar um input do tipo color, para uma tabela em JS, onde ele armazenaria a cor no campo "Cor" da tabela e exibiria a cor ao gerar a tabela de carros estacionados. Consegui fazer a cor funcionar, mas ela não armazena no vetor, e quando eu gero uma outra info de carros, a cor se apaga. poderiam me ajudar?
let dados = []
var entrada
let saida
let cor
function estacionarCarro(){
let modelo = document.getElementById("modelo").value
let placa = document.getElementById("placa").value
cor = document.getElementById("cor").value
entrada = document.getElementById("entrada").value
saida = document.getElementById("saida").value
let obj = {modelo: `${modelo}`, placa: `${placa}`,cor: `${cor}`,entrada: `${entrada}`, saida: `${saida}`}
dados.push(obj)
console.log(dados)
alert("Cadastro realizado com sucesso")
limparNovo()
}
function saidaCarros(){
var valormedio
var valorHora = 5
entrada = document.getElementById("entrada").value
saida = document.getElementById("saida").value
if(entrada < saida){
valormedio = (parseFloat(saida) - parseFloat(entrada))* valorHora
alert("Valor total a pagar: " + valormedio.toLocaleString('pt-br', {style: 'currency', currency: 'BRL'}))
limparNovo()
}
else{
valormedio = (24 - parseFloat(entrada) + parseFloat(saida))* valorHora
alert("Valor total a pagar: " + valormedio.toLocaleString('pt-br', {style: 'currency', currency: 'BRL'}))
limparNovo()
}
}
function gerarTabela(){
document.getElementById("corpotabela"). innerHTML = ""
dados.forEach(function(elem, index){
let table = document.getElementById("corpotabela")
let tr = document.createElement('tr')
tr.innerHTML = `
<tr>
<td>${dados[index].modelo} </td>
<td>${dados[index].placa} </td>
<td id ="trocarCor" onchange = "trocaCor()">${dados[index].cor}</td>
<td>${dados[index].entrada} </td>
<td>${dados[index].saida} </td>
</tr>`
table.appendChild(tr)
})
}
function limparNovo(){
modelo.value = ''
placa.value = ''
cor.value = ''
entrada.value = ''
saida.value = ''
}
function trocaCor(){
cor = document.getElementById("cor").value
document.getElementById("trocarCor").style.backgroundColor = cor
}
#conteiner{
width: 350px;
height: 350px;
display: block;
margin: auto;
border: 2px solid black;
border-radius: 10px;
}
input[type = button], span, h2{
margin-left: 25px;
}
input[type = text]{
width: 150px;
margin-left: 16px;
}
input[type = color]{
width: 150px;
margin-left: 15px;
}
.tabela{
display: block;
margin: auto;
}
th{
background-color: beige;
width: 200px;
border: 1px solid black;
text-align: center;
}
td{
width: 200px;
border: 1px solid black;
text-align: center;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="format.css">
<script src="system.js"></script>
<title>Estacionamento</title>
</head>
<body>
<div id="conteiner">
<h2>Estacionamento</h2>
<span>Modelo:</span>
<input type="text" name="" id="modelo">
<br><br>
<span>Placa:</span>
<input type="text" name="" id="placa">
<br><br>
<span>Cor:</span>
<input type="color" id="cor" onchange="trocaCor();">
<br><br>
<span>Entrada</span>
<input type="time" name="" id="entrada" lim>
<br><br>
<span>Saída</span>
<input type="time" name="" id="saida">
<br><br>
<input type="button" value="Estacionar Carro" id="botaoAdicionar" onclick="estacionarCarro()">
<input type="button" value="Saída de Carro" id="saidaCarros" onclick="saidaCarros()">
<br><br>
<input type="button" value="Mostrar Carros Estacionados" id="mostrarCarros" onclick="gerarTabela()">
</div>
<br><br><br>
<table class="Tabela">
<thead>
<th>MODELO</th>
<th>PLACA</th>
<th>COR</th>
<th>ENTRADA</th>
<th>SAÍDA</th>
</thead>
<tbody id="corpotabela"></tbody>
</table>
</form>
</body>
</html>