Ir para conteúdo
Kikardo

Duvida simples if

Recommended Posts

Pessoal, minha dúvida é bem simples, mas sou iniciante e estou com dificuldade de implementar.

Eu tenho este código, que quando o botão é apertado, ele muda o estado1 para ligado, isso esta funcionando.

Eu preciso criar uma funcão que, quando o estado1 estiver como ligado, ele mostre uma imagem dentro de uma outra div.

Então terei vários botões iguais a esse, e quando por exemplo o estado 1 2 3 4 estiverem ligados, aparecerá uma imagem, quando o botao 1 2 3 4 e 5 aparecerá outra imagem.

Tentei com if, mas não deu certo, pois estou iniciando em JS e HTML.

Se alguém puder me dar uma ajuda.

Obrigado.

<script>
  var onoff1 = document.getElementById('onoff1');
var estado1 = document.getElementById('estado1');
onoff1.addEventListener('change', function() {
    estado1.innerHTML = this.checked ? 'ligado' : 'desligado';
});
</script>

<html>
  <div>
        <input type="checkbox" class="toggle" id="onoff1">
                        <label for="onoff1"></label>
  </div>
   <p id="estado1">desligado</p> // quando clico no botão ele muda esse estado para ligado
   
</html>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Pois bem,

O exemplo a seguir está bem "complexo", porém ambos têm 

como intuito o proposto, então, sendo assim, basta adapta-lo!

 

CÓDIGO

<!DOCTYPE html>
<html>
	<head>
		<title> EXAMPLE </title>

		<style type="text/css">
		.content {
			background: #c0e902;
			padding: 10px 20px;
			margin: 20px auto;
			max-width: 40%;
			width: 40%;
		}
		.content img {
			position: relative;
			width: 100%;
			top: 2px;
		}
		.status {
			text-align: center;
		}
		</style>
	</head>

	<body>
		<div class="buttons"></div>

		<div class="content">
			<img class="background" src="" />
		</div>

		<p class="status"></p>


		<script type="text/javascript">
		// ONDE IRÁ RECEBER OS ELEMENTOS
		var node = document.getElementsByClassName ( 'buttons' )[ 0 ];
		var nodeP = document.getElementsByClassName ( 'status' )[ 0 ];

		// ARRAY DE INPUTs ATIVOS
		var st = [];

		// QUANTIDADE DE ELEMENTOS
		for ( var i = 1; i <= 5; i++ ) {
			// CRIA OS ELEMENTOS
			var newLabel = document.createElement ( 'label' );
			var newInput = document.createElement ( 'input' );
			var newP = document.createElement ( 'p' );

			// ATRIBUIÇÃO DO LABEL
			newLabel.htmlFor = "on_off" + i;

			// ATRIBUIÇÃO DO INPUT
			newInput.id = i;
			newInput.name = "on_off" + i;
			newInput.type = "checkbox";

			newInput.addEventListener ( 'change',
				function () {
					changeStatus ( this );
				}
			);

			// ATRIBUIÇÃO DO P
			newP.id = "status" + i;
			newP.innerHTML = "OFF";

			// "INSERE" OS ELEMENTOS
			node.appendChild ( newLabel );
			node.appendChild ( newInput );
			nodeP.appendChild ( newP );
		}
		</script>

		<script type="text/javascript">
		// LISTA DE BACKGROUND
		var images = [
			"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT8qTBwNRK1wd7Bi8KpbehHYILNWRuzDyjbLgm5HTe9Y6JjfcBW",
			"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSPl7O8qfZrVPyzi3CCtQ-kEgUpSyqrbGjZUF9XGfE3flJMrHr0",
			"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR88yd_vuYSn6_i9ltwVSoyoVjGSXogg82r_tJ-lQFmLYV-vmSFwA"
		];

		// MUDA STATUS
		function changeStatus ( e )
		{
			// STATUS
			var status = document.getElementById ( 'status' + e.id );

			// MUDA O TEXTO
			if ( e.checked ) {
				status.innerHTML = 'ON';

				// INSERE ID NO ARRAY
				st.push ( parseInt ( e.id ) );
			} else {
				status.innerHTML = 'OFF';

				// REMOVE ID DO ARRAY
				st.splice ( st.indexOf ( parseInt ( e.id ) ), 1 );
			}

			// MONTA IMAGEM
			showImage ();
		}

		// IMAGEM
		function showImage ()
		{
			var background;

			console.log ( st );

			// VERIFICA SE NO ARRAY O INPUT 3 E 4
			// ESTÃO ATIVADOS
			if ( st.includes ( 3 ) && st.includes ( 4 ) ) {
				background = images [ 2 ];
			} else {
				background = images [ 0 ];
			}

			console.log ( st );

			// ALTERA SRC DA IMG
			document.getElementsByClassName ( 'background' )[ 0 ].src = background;
		}
		</script>
	</body>
</html>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Achei o desafio bem interessante, uma vez que precisamos trabalhar com comparações muito numerosas... Por exemplo, para combinações de três botões existem nove possível alternativas, para 4 existem 16 e assim por diante. Basicamente é o número de botões elevado ao quadrado. Já havia visto um sistema funcional que aproveitava o comparativo binário para isso. Muitas configurações no PHP se valhem disso. Valeu a pena para estudar mais a fundo o assunto (que era bem fraco na minha mente) e implementei uma versão também... está muito rebuscada, mas quem sabe em outro momento faço uma refatoração mais elegante... segue:

 

https://jsbin.com/resoxobiwa/1/edit?html,css,js,output

 

Ah, o jsbin é interativo, você pode trocar a quantidade de "botões" no começo do script :-).

 

---

Referencias:

Utilizando operadores binários no mundo real: https://codeburst.io/using-javascript-bitwise-operators-in-real-life-f551a731ff5

Configuração de erros no PHP utilizando valores binários: https://www.php.net/manual/en/errorfunc.constants.php

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 mateus.andriollo
      Existe uma forma de fazer um IF na select e comparar com Array de dados?
       
      algo como
       
      Select if( in_array(idCliente,'1,2,3,4,5')=true,'Tem','Não') ) as cliente Não consigo usar inner ou where pois esse array é algo q tem varias regras...
       
      Precisava saber se existe uma função assim em MySQL
    • Por mateus.andriollo
      Existe uma forma de fazer um IF na select e comparar com Array de dados?
       
      algo como
       
      Select if( in_array(idCliente,'1,2,3,4,5')=true,'Tem','Não') ) as cliente Não consigo usar inner ou where pois esse resultado do array é algo q tem varias regras...
       
      Precisava saber se existe uma função assim em MySQL
    • Por Rodrigo Bigas
      Olá colegas, 
      Desenvolvi um sistema simples de boletim escolar. Conforme os dados são inseridos nas textfields ao clicar no botão Resultado, deverá mostrar em uma JTable. O problema é que a última coluna (resultado) da JTable tem que estar dentro de uma condição if/else para setar se o aluno está "aprovado", "em recuperação" ou "reprovado conforme a condição". Estou com dificuldades em descobrir qual é o método correto que seta este resultado de forma dinâmica. Segue os prints:
       
      Conforme o código e o print acima, o sistema funciona somente para a primeira linha, porque está setando de forma estática, obtendo os valores do índice e coluna, qual seria o método para setar o valor de forma dinâmica do índice e coluna?
    • Por stefanyprs
      //modelo.html <!DOCTYPE html> <html lang="pt-br"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Hora do dia</title>     <link rel="stylesheet" href="estilo.css"> </head> <body onload="carregar()">     <header>         <h1> Hora do dia </h1>         </h1>     </header>     <section>         <div id="msg">             msg         </div>         <div id="foto">             <img class="imagem" src="fotomanha.jpg" alt="foto do dia">         </div>     </section>     <footer>         <p>&copy; Rodapé </p>     </footer>     <script src="script.js"></script> </body> </html>   //script.js function carregar () {     var msg = window.document.getElementById('msg')     var img  = window.document.getElementsByClassName('imagem')      var data = new Date()     var hora = data.getHours()          msg.innerHTML = 'Agora são ' + hora + ' horas'          if (hora >= 0 && hora < 12){         //Bom dia         img.src = 'fotomanha.jpg'         } else if (hora >= 12 && hora < 18){         //Boa tarde         img.src = 'fototarde.jpg'      } else {         //Boa noite         img.src = 'fotonoite.jpg'     } }   //estilo.css body{     background-color: aqua;     font: normal 15pt Arial; } header{     color:rgb(255, 255, 255);     text-align: center; } section{     background: white;     border-radius: 10px;     padding: 15px;     width: 500px;     margin:auto;     box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.329);      } footer{     color:white;     text-align: center;     font-style: italic;   } div{     text-align: center; } .imagem{     width: 500px;    /* largura da imagem */     height: 350px;   /*  altura da imagem  */     margin-top: 10px; /* margem do topo */ }
    • Por Kefatif
      Prezados, boa tarde.
       
      Preciso de uma ajuda, tenho um select onde o usuário vai poder selecionar dentre os valores "1" e "2", mas gostaria que quando ele selecionasse o valor 2 fosse enviado um alerta de confirmação, estou tentando fazer através do evento blur, mas não estou sabendo fazer a comparação. Seria possível chamar o evento apenas se o valor selecionado for 2?
       
      Segue meu código teste abaixo.
       
      <!DOCTYPE html> <html> <head> <title>Teste</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script> <script type="text/javascript"> $(function(){ //inserir os códigos aqui $("#fase").blur(function(){ alert("O input perdeu o foco."); }); }); </script> </head> <body> <label style="width:15%">Fase<b style="color:red">*</b><br> <select name="fase" id="fase" class="form-control" required style="width:100%" > <option value="1">1</option> <option value="2">2</option> </select> </label> <label style="width:15%">teste<b style="color:red">*</b><br> <select name="teste" class="form-control" required style="width:100%" > <option value="">Selecione</option> <option value="SIM">SIM</option> <option value="NÃO">NÃO</option> </select> </label> </body> </html>  
      Agradeço desde já.
       
      Abs.
×

Informação importante

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