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 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 */ }
    • By 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.
    • By biakelly
      Olá Tudo bem?
       
      Poderiam me ajudar com a seguinte condição:
      <?php if ($row['facebook'] != "") { echo '<a class="btn btn-dark btn-social mx-2" href="<?php echo $row['facebook']; ?>"><i class="fab fa-facebook-f"></i></a>'; } else { echo ''; } ?>  
      Estou recebendo o seguinte erro:
      Parse error: syntax error, unexpected 'facebook' (T_STRING), expecting ';' or ',' in C:\xampp\htdocs\biazinha\inicial.php on line 371
       
       
      A linha 371 é essa:
      echo '<a class="btn btn-dark btn-social mx-2" href="<?php echo $row['facebook']; ?>"><i class="fab fa-facebook-f"></i></a>';  
       
       
    • By PToledo
      Tenho um IF, ElseIf, Else....
       
      Como contar somando, cada vezes que o IF, ElseIF ou Else for verdadeiro.
       
      Preciso contar a quantidade de vezes que o IF for setado, verdadeiro.
    • By biakelly
      Oi,
       
       não estou conseguindo fazer isso, podem me ajudar?
       
      <?php $botaoaluno = mysql_query("SELECT aluno FROM escola WHERE colegio_id='$colid'",$db); $alunoativo = mysql_num_rows($botaoaluno); if ($alunoativo = 1) { ?> <?php $pegaralunos = mysql_query("SELECT alunosdisponiveis FROM tabelasalunos WHERE userID='{$_SESSION['userid']}' and alunosID='{$objauALN["alunID"]}'", $db); $classe = mysql_num_rows($pegaralunos); if ($classe > 0) { ?> <button name="geraralunos">Aluno presente</button> <?php } else { ?> <button name="geraralunos">Aluno faltante</button> <? } } else{ ?> <p>Não tem aluno</p> <?php } ?> o que eu preciso, se o alunoativo for igual a 1, fazer o próximo IF, mas se ele for igual a 0 mostrar a mensagem (não tem aluno)
×

Important Information

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