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

Olá!

segue sugestão

reservas.zip

>

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.

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

>

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.

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'

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