Jump to content
FxDev

Dúvida com código

Recommended Posts

Estou desenvolvendo uma pagina em htm,que dentro dela existe 3 linguagens de programação as linguagens são : JavaScript,Css e o Htm (l) a pagina está feita porém estou com um problema no JavaScript que está dentro dessa pagina.não é um erro ele simplesmente da refresh ou carrega a pagina novamente toda vez que eu clico em um botão e eu gostaria de poder tirar essa parte dele pois esse botão tem duas funções,eu estou trabalhando com Internet das Coisas (IoT) e para isso preciso de um botão que quando pressionado ele mude esse estado essa parte de mudar o estado do botão eu já consegui fazer.agora meu ultimo problema é conseguir remover a parte a qual faz refresh ou recarrega a pagina,eu vi em um tópico sendo falado sobre a remoção dele totalmente das pagina se alguém souber como se faz e puder me ajudar agradeço.desde já meu muito obrigado! abaixo vou deixar a pagina que eu fiz.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teste</title>

<script type="text/javascript">
 function AlteraRele1(){
    var estado = document.getElementById("estado").innerHTML;

    if(estado == "0"){
        document.getElementById("estado").innerHTML="1";
		document.getElementById("rele").innerHTML="<div class='rele1_ligado'></div>";
		document.getElementById("botao").innerHTML="<a href='/?desligar' class='botao'>Desliga</a>";	
   	} else {
        document.getElementById("estado").innerHTML="0";
		document.getElementById("rele").innerHTML="<div class='rele1_desligado'></div>";
		document.getElementById("botao").innerHTML="<a href='/?ligar' class='botao'>Liga</a>";
    }
 } 

</script>
<style type="text/css">
 root { 
    display: block;
}

body {
    margin: 0;
    padding: 0;
}

#wrapper {
    padding-top: 40px;
    position: relative;
    width: 530px;
    height: 600px;
	margin-right: auto;
	margin-top: 0;
	margin-left: auto;
    font-size: 30px;
    color: black;
    text-align: center;
    font-family: arial;
}

div.rele1_ligado {
    position: absolute;
    right: -190px;
    top: 40px;
    width: 300px;
    height: 206px;
    border: none;
    margin:auto;
	background:url(Img/lampada_on.png) no-repeat left top;
}

div.rele1_desligado {
    position: absolute;
    right: -190px;
    top: 40px;
    width: 300px;
    height: 206px;
    border: none;
	background:url(Img/lampada_off.png) no-repeat left top;
}

#div1 {
	position: absolute;
	right: 340px;
	top: 180px;
    border-radius: 25px;
    border: 2px solid #000;
    width: 520px;
    height: 230px; 
}

#botao{
	position: absolute;
	right: 378px;
	top: 119px;
	width: 128px;
	height: 36px;
}

.botao {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 0px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.1, #16ADFF), color-stop(1, #26A8FF) );
	background:-moz-linear-gradient( center top, #16ADFF 5%, #26A8FF 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#16ADFF', endColorstr='#26A8FF');
	background-color:#ededed;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#ffffff;
	font-family:arial;
	font-size:28px;
	font-weight:bold;
	padding:0px 0px;
	text-decoration:none;
	text-shadow:0px 0px 0px #ffffff;
    width: 140px;
    text-align: center;
}

}.botao:active {
	position:relative;
	top:1px;
}
</style>
</head>

<body>
<div id="div1">
  <div id='rele'></div>
  <div id='estado' style='visibility: hidden;'></div>
 <div id='botao' onclick="AlteraRele1();"></div>
 <script>AlteraRele1()</script></div>
</body>
</html>

 

Share this post


Link to post
Share on other sites

Fala FxDev, cara deu uma olhada no seu código e vi que você está usando um hrfe com uma url valida, para ficar na mesma pagina você tem que usar # dentro do href, fica assim: <a href='#' class='botao'>Desliga</a>;

 

Quando usamos # o link fica na mesma pagina

 

Veja como ficou seu código: 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teste</title>

<script type="text/javascript">
 function AlteraRele1(){
    var estado = document.getElementById("estado").innerHTML;

    if(estado == "0"){
        document.getElementById("estado").innerHTML="1";
		document.getElementById("rele").innerHTML="<div class='rele1_ligado'></div>";
		document.getElementById("botao").innerHTML="<a href='#' class='botao'>Desliga</a>";	
   	} else {
        document.getElementById("estado").innerHTML="0";
		document.getElementById("rele").innerHTML="<div class='rele1_desligado'></div>";
		document.getElementById("botao").innerHTML="<a href='#' class='botao'>Liga</a>";
    }
 } 

</script>
<style type="text/css">
 root { 
    display: block;
}

body {
    margin: 0;
    padding: 0;
}

#wrapper {
    padding-top: 40px;
    position: relative;
    width: 530px;
    height: 600px;
	margin-right: auto;
	margin-top: 0;
	margin-left: auto;
    font-size: 30px;
    color: black;
    text-align: center;
    font-family: arial;
}

div.rele1_ligado {
    position: absolute;
    right: -190px;
    top: 40px;
    width: 300px;
    height: 206px;
    border: none;
    margin:auto;
	background:url(Img/lampada_on.png) no-repeat left top;
}

div.rele1_desligado {
    position: absolute;
    right: -190px;
    top: 40px;
    width: 300px;
    height: 206px;
    border: none;
	background:url(Img/lampada_off.png) no-repeat left top;
}

#div1 {
	position: absolute;
	right: 340px;
	top: 180px;
    border-radius: 25px;
    border: 2px solid #000;
    width: 520px;
    height: 230px; 
}

#botao{
	position: absolute;
	right: 378px;
	top: 119px;
	width: 128px;
	height: 36px;
}

.botao {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 0px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.1, #16ADFF), color-stop(1, #26A8FF) );
	background:-moz-linear-gradient( center top, #16ADFF 5%, #26A8FF 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#16ADFF', endColorstr='#26A8FF');
	background-color:#ededed;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#ffffff;
	font-family:arial;
	font-size:28px;
	font-weight:bold;
	padding:0px 0px;
	text-decoration:none;
	text-shadow:0px 0px 0px #ffffff;
    width: 140px;
    text-align: center;
}

}.botao:active {
	position:relative;
	top:1px;
}
</style>
</head>

<body>
<div id="div1">
  <div id='rele'></div>
  <div id='estado' style='visibility: hidden;'></div>
 <div id='botao' onclick="AlteraRele1();"></div>
 <script>AlteraRele1()</script></div>
</body>
</html>

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 daviassumpcao
      Estou buscando uma orientação ou referência para desenvolver algo similar ao formulário dessa página do iPhone https://www.apple.com/shop/buy-iphone/iphone-se ... quando selecionamos alguma opção, a div que contém o formulário centralizar na página e rola feito um carrossel. Estou completamente perdido com essa demanda que recebi... agradeço antecipadamente a todos que derem uma força. Abraço
    • By Alberto Nascimento
      Como faço que consiga colocar parágrafos no campo tipo "text" do formulário?
          <input name="Text1" style="width: 528px; height: 223px" type="text" /></form>
      Se eu pressiono ENTER automaticamente envia o formulário
      Como então consigo digitar ao preencher o formulário da forma abaixo?
       
    • By Marlonsantos
      Olá pessoal, eu estou começando meu curso de programação Full Stack e tive a tarefa de fazer uma página mais parecida possível com essa. Mas estou com muita dificuldade na hora de colocar essa <DIV> branca dentro dessa <DiV> preta. Eu já consegui colocar os links nas imagens do Facebook e do Instagram, porém não consigo alinhar elas no canto direito, meu <h1> vem junto... Muito obrigado pela atenção galera

    • By leandro123456789
      <div id="direito">
             
             <?php 
                      
                 $link = filter_input(INPUT_GET, 'link');
                 
                 $pag[1] = "../admin/home.php";
                 $pag[2] = "../admin/classes/Lista.php";
                 
              
              
                 if(!empty($link)){
                     
                     if(file_exists($pag[$link]))
                        
                      {
                         include $pag[$link];
                      
                      }
                        
                      else
                      { 
                         
                          include "home.php";
                      
                      }
                     
                 }else{
                     include "home.php";
                 }
              
              ?>
             
          </div>
       
       
      Estou tentando colocar a paginação do meu banco em $ pag [2] na minha página: ../admin/classes/Lista.php tem o seguinte código de paginação:

      <? php
          
          include_once ("../ admin / classes / ClassConexao.php");
          
          
          // verifique a página atual se informado no URL, caso contrário, ela será atribuída como 1ª página
          $ pagina = (isset ($ _ GET ['link = 2']))? $ _GET ['link = 2']: 1;
       
          // seleciona todos os itens da tabela
          $ cmd = "selecione * da categoria";
          $ produtos = mysqli_query ($ conn, $ cmd);
          
          // conta o total de itens
          $ total = mysqli_num_rows ($ produtos);
       
          // seta o número de itens por página, neste caso, 2 itens
          $ registros = 2;
       
          // calcula o número de páginas arredondando o resultado
          $ numPaginas = teto ($ total / $ registros);
       
          // variável para calcular o início da visualização com base na página atual
          $ inicio = ($ registros * $ pagina) - $ registros;
       
          // seleciona itens por página
          $ cmd = "selecione * da categoria limite $ inicio, $ registros";
          $ produtos = mysqli_query ($ conn, $ cmd);
          $ total = mysqli_num_rows ($ produtos);
           
          // exibe produtos selecionados
          while ($ produto = mysqli_fetch_array ($ produtos)) {
              echo $ produto ['id_categoria']. "-";
              echo $ produto ['categoria']. "-";
              echo $ produto ['ativo_categoria']. "<br />";
          }

      // Não sei como consertar esta parte para mostrar a paginação nesse $ pag [2] = "../admin/classes/Lista.php";
           
          // exibe paginação
          para ($ i = 1; $ i <$ numPaginas + 1; $ i ++) {
              
             echo "<a href='?pagina=$i'>". $ i. "</a>";
          }
                  
      ?>
      Meu menu fica assim:

      <div id = "sessao"> Categoria </div>
         <ul>
             
            
             <li> <a href="index.php?link=3"> Cadastro </a> </li>
             <li> <a href="index.php?link=2"> Listar / Editar </a> </li>
         
        </ul>
×

Important Information

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