Trocar uma imagem através de um valor de um <input>
Tenho o seguinte código:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<h1>Teatro</h1>
<hr>
<p>Poltrona:<input id="poltrona">
<button type="button" onclick="reservarPoltrona()">Reservar</button>
</p>
<hr>
<div id="mapa" style="font-family: 'Courier New'; font-size: 10px">
<h3>Mapa do Teatro</h3>
</div>
<p>Legenda: </p>
<h4>
<img src="banco.jpg" style="width: 25px; height: 35px">Poltrona Disponível
<img src="banco2.jpg" style="width: 25px; height: 35px">Poltrona Reservada
</h4>
<script>
var aReserva = [];
montarMapa();
function montarMapa() {
for (i = 1; i <= 300; i++) {
var sp = document.createElement("span");
var zeros = "";
if (i<10) {
zeros = "00";
} else if (i<100) {
zeros = "0";
}
var num = document.createTextNode("["+zeros+i+"]");
if (i % 20 == 11) {
sp.style.marginLeft = "100px";
} else {
sp.style.marginLeft = "5px";
}
sp.appendChild(num);
document.getElementById("mapa").appendChild(sp);
var banco = document.createElement("img");
banco.src = "banco.jpg";
document.getElementById("mapa").appendChild(banco);
banco.style.width = "35px";
banco.style.height = "40px";
banco.id = "banco" + i;
if (i % 20 == 0) {
var br = document.createElement("br");
document.getElementById("mapa").appendChild(br);
}
}
}
function reservarPoltrona() {
var poltrona = document.getElementById("poltrona").value;
aReserva.push(poltrona);
if (poltrona == "" || isNaN(poltrona)) {
alert("Informe os dados da reserva corretamente");
} else {
}
}
</script>
</body>
</html>
E tenho 3 tarefas:
- Armazenar as reservas de poltrona no vetor aReserva;
- Trocar a imagem da poltrona reservada (banco2.jpg) - aqui poderia ser qualquer imagem de poltrona, apenas para fazer a distinção das poltronas livres para as reservadas);
- Impedir a reserva de poltronas ocupadas.
Estou quebrando a cabeça para tentar resolver isso, e apesar de ser simples, não consigo. Estou recém começando a aprender sobre a DOM e ainda não domino nem 10% desses elementos, se pudessem ao menos me dar uma luz, eu ficaria muito grato.
Discussão (6)
Carregando comentários...