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 VCastilho
      Bom Dia
      Consegui da seguinte forma, mas com faço para que o código selecionado substitua o antigo?

       
      <!DOCTYPE html> <html> <body> <style> #filtrotopo { background: #484949; } } #h4topo { text-align: center; color: white; font-size: 18px; } #form1 section { display: flex; flex-wrap: wrap; justify-content: center; } h4 { } #form1 section label { display: flex; justify-content: center; align-items: center; margin: 0 10px; /* width: calc(100% / 5); */ color: red; text-align: center; } @media screen and (max-width:768px) { #form1 section label { margin-bottom: 20px; width: 100%; } } </style> <div id="minhaEscolha"></div> <div id = "filtrotopo"> <h4 style="text-align: center;" id="h4topo">Personalize</h4> <form action="#" id="form1"> <section> <label> <button onclick="exemplo1()"> exemplo1</button> </label> <label> <button onclick="exemplo2()"> exemplo2 </button> </label> </section> </form> <br> </div> <div id="teste1" style="display: none;"> <h3>Texto 1</h3> <p>Sou o Texto 1</p> <p>Tenho o nome de Texto 1</p> </div> <script> function exemplo1() { var x = document.getElementById("url"); var y = document.getElementById("minhaEscolha"); y.innerHTML = x.innerHTML; } </script> <script> function exemplo2() { var x = document.getElementById("teste1"); var y = document.getElementById("minhaEscolha"); y.innerHTML = x.innerHTML; } </script> <body> </html>  
    • By nohime
      Como resolver essas três tarefas sobre Comandos de Decisão IF do C#?
      2. Receber um número e verificar se ele esta na faixa de 0 à 9. Se sim, mostre uma mensagem afirmativa, caso contrário mostre uma mensagem indicando que o número não se encontra na faixa.
      6. Receber dois números e os apresente em ordem crescente. Utilize apenas a estrutura de decisão if, ou seja, sem o opcional else.
      9. Receber um ano e se este ano for bissexto exibir na tela “Ano Bissexto”, senão exibir na tela “Ano Não-Bissexto”. Um ano é bissexto se for divisível por 4, mas não por 100. Um ano também é bissexto se for divisível por 400.
    • By mr22robot
      Estou com uma dúvida. É possível determinar um select a partir de uma escolha?
      Ex. 
      SELECT CASE WHEN a < b THEN select * from tabela1 WHEN d < e THEN select * form tabela2 END FROM tabela; Algo parecido. Se uma condição for atendida select1 , se outra condição for atendida: select2.
      O que acontece: estou com um relatorio que preciso criar no winthor e não consigo melhorar isso. Tenho de fazer três relatorios como solução. Se eu consigo implantar isso, eu faria somente um relatorio. 
      Tipo se marcar um campo, sai um relatorio. Se marcar outro, saí outro relatorio.
    • By vagner.analista
      Senhores boa tarde, alguém pode me ajudar?
       
      Tenho a seguinte situação, um campo data em duas tabelas, onde caso o contrato tenha aditivo o campo data da tabela TITMCNTADITIVO,  fica preenchido. caso o contrato não tem aditivo ela fica com o valor null. Então caso o valor dessa tabela aditivo estiver null, eu gostaria de apresentar o campo data da tabela TITMCNT do contrato que tem a data fim do contrato, com o select abaixo eu consigo saber se tem aditivo ou não:
      SELECT TOP 1   (DATA + 90) AS DATAFIM              FROM TITMCNTADITIVO (NOLOCK)             WHERE 1=1             AND CODCOLIGADA = 1             AND IDCNT = 72 Neste caso este contrato não tem aditivo, então, gostaria que ele executasse outro SELECT:
      SELECT (DATAFIM + 90) AS DATA_FIM  FROM TITMCNT             WHERE IDCNT = '72'  
       
      O mais lógico que tentei foi assim, mas não dá certo:

      SELE
      CT TOP 1  (DATA + 90) AS DATAFIM, CASE (DATA) WHEN IS NULL THEN ( SELECT (DATAFIM + 90) AS DATA_FIM  FROM TITMCNT                     WHERE IDCNT = '72' ) END AS DATAFIM FROM TITMCNTADITIVO (NOLOCK) WHERE 1=1 AND CODCOLIGADA = 1 AND IDCNT = 72  
    • By nicolasbessa
      Boa tarde!
       
      Como aplicar a regra abaixo em um select?

      Regra Join
      Quando o campo substr(x, 1,1)  ='1'
      montar a chave de pesquisa:
      y = '8' AND y1 =  'L'||lpad( x1, 2)) 

      Quando o campo substrt(x, 1,1) for igual ='A'
      montar a chave de pesquisa:
      y = '8' AND y1 =  'M'||lpad( x1, 2)) 
       
      obrigado!
×

Important Information

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