Ir para conteúdo

Arquivado

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

Kikardo

Duvida simples if

Por , em Javascript

Recommended Posts

Kikardo    0

Kikardo
Postado

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

ShadowDLL    2

ShadowDLL
Postado

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

Michael Granados    0

Michael Granados
Postado

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

  • Conteúdo Similar

    • mateus.andriollo
      IF e array [RESOLVIDO]
      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
    • mateus.andriollo
      IF e array [RESOLVIDO]
      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
    • Rodrigo Bigas
      Setar um resultado em uma uma coluna da JTable através de uma condição if/else
      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?
    • stefanyprs
      Não estou conseguindo mudar a imagem de acordo com a hora apresentada no if/else.
      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 */ }
    • Kefatif
      Chamar evento blur se valor do select for igual a 2.
      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.

  Aceito