Trocar o .src de uma <img> através de um id dentro de um vetor
Estou desenvolvendo um script e quero trocar a foto da cadeira conforme a pessoa digite o id da cadeira no input, no caso "banco1", ou "banco2", porém, quando eu fui fazer isso, tentei utilizar um banco[ i ].src = "banco2.jpg"; (ou banco.src[ i ], não sei qual o correto), mas tentei ambos e não funcionou. Alguém sabe como eu poderia mudar a imagem de acordo com o id que a pessoa digitou?
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<h1>Teatro Guarani - Show Papas da Língua</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;
var banco = document.createElement("img");
aReserva.push(poltrona);
if (poltrona == "" || isNaN(poltrona) || poltrona < 1 || poltrona > 300) {
if (aReserva[i] == banco[i]) {
banco.src = "banco2.jpg";
banco.style.width = "35px";
banco.style.height = "40px";
}
}
}
</script>
</body>
</html>
Discussão (0)
Carregando comentários...