Trocar uma imagem através de um valor de um <input>

lucascuri1 · Junho 25, 2017

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.

washalbano · Junho 25, 2017

Olá!

segue sugestão

reservas.zip

lucascuri1 · Junho 25, 2017

2 horas atrás, washalbano disse:

Olá!

segue sugestão

reservas.zip

Cara, ficou muito massa! Mas eu não consegui entender quase nada desse código :(. Também não entendi por que fizesses em um arquivo php e não no html que eu criei, ainda sou iniciante... Mas obrigado pela ajuda.

washalbano · Junho 25, 2017

Ops! Perdão! usei o .php por causa do costume, mas pode mudar para .html, afinal, não tem nada de .php

lucascuri1 · Junho 25, 2017

16 minutos atrás, washalbano disse:

Ops! Perdão! usei o .php por causa do costume, mas pode mudar para .html, afinal, não tem nada de .php

Teria alguma forma de fazer esse exercício utilizando o Javascript puro? Não conheço bem os elementos do Jquery.

washalbano · Junho 25, 2017

não há nada de jquery aí, veja:

Acrescentei alguns comentários pra tentar clarear as idéias

function montarMapa() {
   for (i = 1; i <= 300; i++) {

      // a imagem da cadeira e o número da cadeira ficarão dentro de uma div
      // define a div
      var div = document.createElement("div");
      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) {
         div.style.marginLeft = "100px";
      }
      sp.appendChild(num);

      // a div terá um atributo dada-state que será o estado atual da poltrona
      // available = disponível
      // reserved = reservada
      div.setAttribute('data-state', 'available');
      // terá um título, que aparece quando parar o mouse sobre a div
      div.setAttribute('title', 'Reservar a poltrona ' + i);
      // terá uma id com o número da poltrona no final
      div.id = 'poltrona' + i;
      // coloca a tag span, com a numeração da poltrona, dentro da div
      div.appendChild(sp);

      // coloca a div#poltrona+i dentro da div#mapa
      $("mapa").appendChild(div);
      if (i % 20 == 0) {
         var br = document.createElement("br");
         $("mapa").appendChild(br);
      }
   }
}

function reservarPoltrona(e) {
   // pega o valor no input#poltrona
   var poltrona = $("poltrona").value;

// se o valor for vazio, não for numérico, for menor que um, for maior que 300
   if (poltrona == "" || isNaN(poltrona) || poltrona < 1 || poltrona > 300) {
      // exibe alerta na tela
      alert("Informe os dados da reserva corretamente");
      // se não e se já não estiver reservada
   } else if ($('poltrona' + poltrona).getAttribute('data-state') != 'reserved') {
      // altera o status da poltrona para reserved
      $('poltrona' + poltrona).setAttribute('data-state', 'reserved');
      // se já estiver reservada
   } else {
      // exibe alerta na tela
      alert('A poltrona indicada já está reservada!');
   }
   // limpa o input#poltrona
   $("poltrona").value = "";
   // retorna false para que o formulário não seja submetido
   return false;
}

// função para abreviar o uso de getElementById, usando apenas o símbolo de cifrão $
function $(id) {
   return document.getElementById(id);
}

// função para ser executada somente após DOMContentLoaded
function ready(fn) {
   // se o documento já estiver pronto
   if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
      // execute a função passada por parâmetro
      fn();
      // se não
   } else {
      // assim que o documento estiver pronto, gentileza executar a função passada no parâmetro
      document.addEventListener('DOMContentLoaded', fn);
   }
}

// função a ser executada assim que DOMContentLoaded
function reachThemAll() {
   // 'pega' todas as div#poltrona+i
   var elements = document.querySelectorAll('#mapa div');
   // para cada div#poltrona+i
   Array.prototype.forEach.call(elements, function (el, i) {
      // adicione um event listener, para quando div#poltrona+i for clicada
      el.addEventListener('click', function (e) {
         // altere o atributo data-state para reserved
         this.setAttribute('data-state', 'reserved');
      });
   });
}

// monta o mapa das poltronas
montarMapa();

// executa a função inicial que vai ficar de olho em cada div#poltrona+i
ready(reachThemAll);

      /* as imagens(poltrona disponível/reservada) serão definidas via css */
      #mapa div{
         border:1px solid #bbb;
         display:inline-block;
         text-align:center;
         margin:5px;
         border-radius:4px;
         overflow:hidden;
         cursor:pointer;
         background: url(banco.jpg) center 16px no-repeat;
         background-size:40px auto;
         height:60px;
         width:45px;
      }
      #mapa div span{
         background-color: #eee;
      }
      /* quando a div tiver seu data-state como reserved */
      #mapa div[data-state='reserved']{
         /*a imagem será outra */
         background-image: url(banco2.jpg);
      }
      /* quando a div tiver seu data-state como reserved
      o span terá outra cor de fundo */
      #mapa div[data-state='reserved'] span{
         background-color:red;
         color:white;
      }
      #mapa div+div{
         margin-left:10px;
      }
      #mapa div img, #mapa div span{
         display:block;
      }

<!-- quando o formulário for submetido, retornará o resultado da função reservarPoltrona -->
<form onsubmit="return reservarPoltrona();">
         <p>
            Poltrona:<input id="poltrona" type='number' autofocus required>
            <button type="submit">Reservar</button>
         </p>
      </form>

Portanto, para cancelar uma reserva, basta voltar o data-state das div#poltrona+i para 'available'

lucascuri1 · Junho 25, 2017

Teria como fazer esse mesmo efeito de trocar a cadeira sem utilizar o "data"? Eu precisava fazer esse exercício utilizando especificamente um vetor :/

Entrar

Arquivado

Trocar uma imagem através de um valor de um <input>

Recommended Posts

lucascuri1 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

washalbano 54

Compartilhar este post

Link para o post

Compartilhar em outros sites

lucascuri1 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

washalbano 54

Compartilhar este post

Link para o post

Compartilhar em outros sites

lucascuri1 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

washalbano 54

Compartilhar este post

Link para o post

Compartilhar em outros sites

lucascuri1 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sistema não funciona corretamente

Fazer busca no Banco de dados usando vários critério

Ler campos com caracteres especiais no xml

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante