Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

lucascuri1

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

Por , em Javascript

Recommended Posts

lucascuri1    0

lucascuri1
Postado

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

lucascuri1    0

lucascuri1
Postado
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

lucascuri1    0

lucascuri1
Postado
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

washalbano    54

washalbano
Postado

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
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • ILR master
      Carregamento preloading
      Por ILR master
      Fala pessoal, tudo bem?
       
      Tô tentando fazer um pre-loading, mas não consigo de jeito algum.
      Quero mostrar uma animação enquanto a página é carregada e depois de caregada, esconder a animação e mostrar conteúdo.
       
      Aguém pode me ajudar?
       
      Segue código abaixo
       
       
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
          <title>PÁGINA LOAD</title>

      <style type="text/css">
      .loadclass {
          border: 2px solid #f3f3f3; /* Light grey */
          border-top: 4px solid #ffc401; /* Blue */
          border-radius: 50%;
          width: 50px;
          height: 50px;
          animation: spin 2s linear infinite;
      }
      @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
      }
      .conteudo {
          display:none;
      }
      </style>
      <script>
          function loading(){
              document.getElementsByClassName('loadclass')[0].style.display="none";
              document.getElementsByClassName('conteudo').style.display="block";
          }
      </script>
      </head>
      <body onLoad="loading()">
      <div class="loadclass"></div>
      <div class="conteudo">SEU CONTEUDO AQUI DENTRO!!!</div>
      </body>
      </html>
    • ILR master
      Abrir url na mesma janela
      Por ILR master
      Pessoal, pergunta bem simples. Abaixo tenho o seguinte código:
       
      <script>
      function alerta()
      {
        if (window.confirm("Você realmente quer sair?")) {
          window.open("sair.html");
      }
      }
      </script>
       
      Funciona perfeitamente, só que está abrindo em outra janela e quero que abra na mesma janela.
       
      Alguém pode me ajudar?
    • Giovanird
      Atualizar pagina PHP que esta dentro de uma div
      Por Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
    • Thiago Duarte
      Drag and Drop para arrastar imagem
      Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • belann
      Upload de arquivos com javascript
      Por belann
      Olá!
       
      Estou fazendo o upload de arquivos com fetch dessa forma
      fetch(url, {
              method: 'POST',
              headers: {'Content-Type': 'multipart/form-data',},
              body: formData 
          }).catch((error) => (console.log("Problemas com o Upload"), error));
       
      estou usando input type=file
      e criando uma const formData = new FormData(); 
      mas não faz e não dá nenhum erro.
      estou fazendo o upload com a url="http://localhost/dashboard/dados".
×

Informação importante

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

  Aceito