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 jcsalim
      Pessoal estou com uma dificuldade, criei uma condição if e else para exibir um resultado mas não está dando certo. Veja o código abaixo:
      o if verifica se o valor no banco de dados está "0.00", se for true ele retorna como resposta o primeiro alert, senão ele vai pro segundo alert, mas não vai se eu coloco aspas duplas ou simples ele pula pra condição else e se eu tiro as aspas ele para no if e pronto. Alguém pode me ajudar.
       
      if($mail->Send()){
          
            if($valor_curso == "0.00") {
              echo '
          <script> 
              alert("Obrigado pela inscrição!");
          </script>';
              //adicionei o parâmetro idcliente, pois na próxima página vamos precisar pegar o valor do cupom, que por sua vez está cadastrado no cliente!
             
              echo "<script>location.href='cursos.php?curso=".$curso."'</script>";
            } else{
              echo '
          <script>
              alert("Sua pré-inscrição para o curso '. $nome_curso  .' foi recebida com sucesso. Finalize com o pagamento para confirmar a inscrição");        
          </script>';
       
       
    • By oomaikoo
      Boa noite pessoal, estou tentando fazer um código, para mostrar um banner em meu site, quando o usuário entrar, baseado na localização dele. É basicamente o seguinte: a API de geolocalização retorna o nome da cidade, e, se for a cidade, então mostre o banner. Se não for, mostre outro. O código JavaScript que estou usando é esse:
      <script type="application/javascript"> function geoip(json){ var city = document.getElementById("user_city"); city.textContent = json.city; } </script> <script async src="https://get.geojs.io/v1/ip/geo.js"></script> A cidade é: <span id="user_city"></span>

      Esse código retorna o nome da cidade no <span id>.

      Porém eu preciso fazer um IF, ELSE no próprio JavaScript, para mostrar o banner ou não. Seria basicamente assim:
      <script type="application/javascript"> function geoip(json){ var city = document.getElementById("user_city"); city.textContent = json.city; } if (city == "nomedacidade") { document.write ("<img src='banner1.jpg'></img>"); } else { document.write ("<img src='banner2.jpg'></img>"); } </script> <script async src="https://get.geojs.io/v1/ip/geo.js"></script>

      O problema é que a variável city não fica setada dentro do if, não retorna o nome da cidade, eu só queria comparar no if o nome da cidade com o que a API retorna.
      Alguém tem alguma ideia?
    • 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.
×

Important Information

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