Ir para conteúdo
lucascuri1

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

Recommended Posts

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.

banco.jpg

banco2.jpg

Compartilhar este post


Link para o post
Compartilhar em outros sites
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.

Compartilhar este post


Link para o post
Compartilhar em outros sites
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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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'

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por JGD
      Supondo que tenho um input name = dataHoraINI...
      Este input tem o  valor/value =  21/03/2019 09:00 
      Chamo a função abaixo pelo <button...:
       
      <button class="btn btn-primary" onclick="popdataJGD('dataHoraINI','pop1',document.getElementById('dataHoraINI').value)"> <i class="glyphicon glyphicon-calendar"></i> </button>  
      São 03 parâmetros: popdataJGD(objeto, div, value).. Sendo o 3º: data + hora.
       
      Observar que passo para a função o 3º parâmentro assim: document.getElementById('dataHoraINI').value
      Como poderia passar este 3º paramentro como string e inline a data e hora ???
       
      Qual diferença entre: 
      document.getElementById('dataHoraINI').value E
      this.value E/Ou ainda.
      var data_hora = "21/03/2019 09:00" Neste caso : popdataJGD(objeto, div, data_hora)... Observar no code acima a questão das aspas simples.
       
      Agradeço qualquer ajuda conceitual
       
    • Por _badi_
      Preciso de ajuda! Pode parecer uma dúvida besta, mas sou nova nessa área e não estou conseguindo resolver essa questão da facul!
      A questão é:
      1)      Faça o fluxograma e depois faça o código em Javascript de um programa  que lê  3 notas obtidas por um aluno e depois calcule  e imprima a média dos para avaliação, usando  a fórmula abaixo. Imprimir depois o conceito, conforme a tabela abaixo. Use o prompt no javascript e um botão que mostre a média e o conceito depois que do clique no mesmo.
      MA = (Nota1 + Nota2 x 2 + Nota3 x 3 + ME )/7
      Média de Aproveitamento
      Conceito
      10
      A
      7,5 e < 10
      B
      4,0 e < 7,5
      C
      < 4,0
      D
       
      Meu código ficou assim:
      <!DOCTYPE html> <html> <head>      </head> <body> Para calcular sua media e saber seu conceito, clique no botao abaixo: <br> <br> <button onclick='mostra()'>Try it</button> <p id="resp"></p> <br> <br> <script>     function mostra(){         var nota1 = prompt ("Digite a nota 1");         var resp1 = parseInt (nota1);         var nota2 = prompt ("Digite a nota 2");         var resp2 = parseInt (nota2);         var nota3 = prompt ("Digite a nota 3");         var resp3 = parseInt (nota3);         var ME = (resp1 + resp2 + resp3)/3;         var MA = resp1 + (resp2 * 2) + (resp3 * 3) + ME/7;         if (MA=10) {             document.getElementById("resp").innerHTML=("Sua media foi " + ME + " e seu conceito foi A!");         } else if (MA=7.5&&MA<10){             document.getElementById("resp").innerHTML=("Sua media foi " + ME + " e seu conceito foi B!");         } else if (MA=4&&MA<7.5){             document.getElementById("resp").innerHTML=("Sua media foi " + ME + " e seu conceito foi C!");         } else if (MA<4){             document.getElementById("resp").innerHTML=("Sua media foi " + ME + " e seu conceito foi D!");         }         }          </script> </body> </html>  
      Mas sempre volta como conceito A, não importa os valores que coloco :(
      Obrigado!
       
    • Por Eduardo S. B. de Oliveira
      Senhores, preciso de uma ajuda, estou criando um formulário onde o checkbox fique "checked" quando clicar em cima, mas o detalhe e que quando atualizar a pagina o checkbox permaneça marcado. É possível? 
    • Por alh
      Estou seguindo as especificações corretamente do git. https://github.com/opencartbrasil/opencart-rest-api/blob/master/README.md
      Estou tendo o erro ao acessar minha página de integração:
      ERRO: Not found (entity)
      Ao acessar minha página que contém o seguinte código: categorias.php
       
      No arquivo abaixo estou colocando a minha KEY e domínio correto.
      <?php $headers = array(); $headers[] = 'Content-Type: application/json'; $headers[] = 'key: MINHAKEY'; // // Replace key value for API key OpenCart (Only numbers and letters) $ch = curl_init(); curl_setopt_array($ch, [ CURLOPT_URL => 'http://www.NOMEDOMEUDOMINIO.com.br/api.php/categories', // Replace domain and table name CURLOPT_HTTPHEADER => $headers, CURLOPT_CUSTOMREQUEST => 'GET', CURLOPT_RETURNTRANSFER => true, CURLOPT_SSL_VERIFYHOST => false, CURLOPT_SSL_VERIFYPEER => false ]); $out = curl_exec($ch); curl_close($ch); print_r( $out ); // Result json ?>
    • Por gleidsonb12
      Bom dia amigos, estou iniciando no javascript e tenho seguinte problema, preciso que o javascript mostre uma campo justificativa se a data selecionada no input for superior a 5 dias da data atual.
       
      O script que estou tentando dazer funcionar é este:
       
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <script> function obtemMes() { var mes = document.getElementById("dataselecionada").value; if (mes<>"2019-03-15"){document.getElementById("mes").style.display = "none";} </script> <div class="form-group col-md-3"> <label>Data</label> <input type="date" id="dataselecionada" class="form-control" onchange="obtemMes()"> </div> <div class="form-group col-md-3" id="mes"> <label>Mes</label> <input type="text" class="form-control"> </div> Qualquer ajuda é bem vinda
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.