0

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>

1 Resposta 1

1

Fala Bruno! Então, você está chamando a função trocaCor() no input de cor, o que é desnecessário, já que pelo o que eu entendi, essa função é para trocar a cor de um carro já registrado. E como não tem nenhum carro registrado, vai dar erro se chamar a função neste lugar.

Você também tem um problema ai com os ID, especificamente o ID trocarCor, pois cada ID precisa ser único, mas como você está gerando uma tabela com várias entradas, o ID está sendo duplicado, então na hora de chamar document.getElementById não vai dar certo. Você precisaria ou remover o ID ou criar um ID único para cada entrada (colocando o index no ID, por exemplo).

Eu recomendo você passar o index dos dados para a função trocaCor, assim você poderia acessar dados[index] sem depender do ID. Também vale notar que o onchange na tabela não vai funcionar pois é um elemento <tr>, crie um input color dentro da tabela igual você fez no formulário e coloque esse onchange nele.

function gerarTabela(){
    let table = document.getElementById("corpotabela");
    table.innerHTML = "";
    dados.forEach(function(elem, index){
        let tr = document.createElement('tr')
        tr.innerHTML = `
        <tr> 
            <td>${dados[index].modelo} </td>
            <td>${dados[index].placa} </td>
            <td>
                ${dados[index].cor}
                <input id="trocaCor-${index}" type="color" onchange="trocaCor(${index})"/>
            </td>
            <td>${dados[index].entrada} </td>
            <td>${dados[index].saida} </td> 
        </tr>`
        table.appendChild(tr)
    })
}

function trocaCor(index){
    let valor = document.getElementById(`trocaCor-${index}`).value;
    data[index].cor = valor;
}

👍👍

Você deve fazer log-in para responder a esta pergunta.

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