Jump to content
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>

 

Share this post


Link to post
Share on other 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>

 

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By PeeWee
      Opaa, o problema é o seguinte: preciso fazer uma busca no BD com esse código:
       
      $buscar = $pdo->prepare("SELECT * FROM `produtos` WHERE `titulo` LIKE '%$textoBusca%'");
              $buscar->execute();
              $retorno = array();
              $retorno['dados'] = '';
              $retorno['qtd'] = $buscar->rowCount();
              if($retorno['qtd'] >= 0){
                  while($conteudo = $buscar->fetchObject()){
                      $retorno['dados'] .= '<a href="#" id="'.$conteudo->id.':'.$conteudo->valor.'">'.utf8_encode($conteudo->titulo).'</a>';
                  }
              }
       
      O problema é que os resultados estão vindo duplicados (no BD só há 3 registros)
       
      Não tenho idéia do que fazer, se alguem puder ajudar agradeço desde já. 
       
    • By Gildvan Arley
      <?php $data = date("d/m/Y"); $fimVip = $exibir_pag["fimvip"]; $dataPag = $exibir_pag["data"]; if ($fimVip == NULL){ echo "<span class='label label-danger'>Aguardando Pagamento</span>"; } else if ($fimVip < $data){ echo "<span class='label label-success'>Vip ativado</span>"; } else if ($fimVip == $data){ echo "<span class='label label-info'>Acaba hoje</span>"; } else if ($fimVip > $data){ echo "<span class='label label-danger'>Vip Removido</span>"; } ?> Estou com um problema
      o else só esta indo ate o Vip Ativado o restante não vai mais.
      assim que o jogador se cadastra ele recebe a data como NULL de pagamento, por isso usei ali $fimVip == NULL
       
      Print do painel
      http://prntscr.com/po5ph2
    • By Mfenoglio
      Galera boa tarde, estou com o seguinte problema.
      Eu quero fazer uma conta entre duas tabelas se for PAGO ou RECEBIDO.
      Minha query

       
      SELECT F10_CODBANCO, F10_VALOR, F0S5_RECPAG, SUM(S05_VALOR) AS SVALMOV, G27_N35OMEBAN5CO FROM F10, F05, G27 WHERE FS10_GRUPO = F05_GRUPO AND F10_EMPESA = F0X5_EMPRESA AND F_FILIAL d= F05_FILIAL AND Fa10_CGODBANCO = F05_BANCO AXND F10_GRUPO = G27_G AND F1MPARESA = G27_EAMPRESDA AND F10_FILIAL = G27_FILIAL AND F10_CODBANCO = G27_CODIGO AND FZ10_VALOR <> 0 GROUAP BYA F10_CODCBANCO, FA10_VALOR, F05_RECGHPAG, G27_NHOMEBANAO AORDER BY F10D_CODANCFO  
      o que eu quero é o seguinte, Se F05_RECPAG for igual a P então faça F10_VALOR - SUM(F05_VALOR) AS VALMOV .... agora se for igual a R faça F10_VALOR + SUM(F05_VALOR) AS VALMOV.
       
      Agradeço quem puder me ajudar. vlw
    • By gustavodubarbosa
      Estou criando uma página que realize monitoramento de atividades.
      No meu código PHP defini uma variável que busca a data atual, depois passei o parâmetro de conexão com o banco de dados, depois criei um while para buscar as informações, dentro do while criei um if, a condição if é que se a variável data for igual a data cadastrada na atividade, exiba toda a atividade cadastrada. Mas o problema é que o if não está controlando essa condição, está passando direto e exibindo tudo.
      <?php $number = ('23'); $data = date("Y-m-d"); echo "$data"; /*Aqui realizo a conexão com o banco de dados, passo os dados para conectar, caso dê algum erro, o sistema me retorna uma mensagem de erro*/ $conect = mysqli_connect('localhost','root','','projeto_pessoal') or die ('Erro na conexão com o banco de dados'); /*Aqui passo o comando para realizar a busca no banco de dados, aplicando o filtro de pesquisa*/ $result_pesquisa = "SELECT * FROM cadastrar_atividade"; /*Neste momento, mando a execução, preciso passar como parametro a variável com a conexão e a variável com o comando, caso dê erro, será exibido uma mensagem*/ $resultado_pesquisa = mysqli_query($conect, $result_pesquisa); /*Aqui é aberto um laço de repetição para fazer uma varredura no banco de dados, em seguida realizo a exibição do que foi encontrado*/ ?> <h1>Resultado da Pesquisa</h1> <?php while($rows_pesquisa = mysqli_fetch_array($resultado_pesquisa)){ if($rows_pesquisa['prazo'] == $data) echo '<p class="title">'.'ID da atividade: '.'</p>'.'<p class="result">'.$rows_pesquisa['id'].'<br>'.'</p>'; echo '<p class="title">'.'Nome da atividade: '.'</p>'.'<p class="result">'.$rows_pesquisa['nome_atividade'].'<br>'.'</p>'; echo '<p class="title">'.'Descrição da atividade: '.'</p>'.'<p class="result">'.$rows_pesquisa['desc_atividade'].'<br>'.'</p>'; echo '<p class="title">'.'Prioridade: '.'</p>'.'<p class="result">'.$rows_pesquisa['prioridade'].'<br>'.'</p>'; echo '<p class="title">'.'Prazo: '.'</p>'.'<p class="result">'.$rows_pesquisa['prazo'].'<br>'.'</p>'; echo 'carregado'; echo '<hr></hr>'; } ?>  
    • By Ericles Boanova
      Olá,
      Estou desenvolvendo um Guia de Solução para pessoas que estão com problemas técnicos com seu notebook.
      Basicamente, no meu banco de dados (Mysql) está cadastrado id_pergunta, pergunta, sim e nao.
       
      Ex:
      id_pergunta pergunta sim não 1 Equipamento está carregado? 2 5 2 Equipamento sofreu alguma queda recentemente? 3 4 3 Entre em contato com uma autorizada para verificar se seu equipamnto possui garantia n/a   4 Faça drenagem de energia no equipamento .. .. 5 Entao carregue! .. ...  
      Então, é basicamente este o ponto que estou com dificuldades.
      Preciso transpor esta lógica do banco de dados para o php.
      Terá uma tela onde haverá diversos problemas genéricos (não liga, não da boot, etc) e a partir da seleção de uma dessas opções irá puxar a primeira questão do banco.
      Com base na resposta desta questão, será buscada a próxima questão ou será finalizado, caso o problema seja resolvido.
      Como faço o código php para este caso? para que fique nesse looping até a solução?
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.