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 granderodeo
      Olá tenho a página index.php e tenho a página product.php, ao clicar no produto na página inicial, quero que redirecione para página product.php mostrando os dados do determinado produto que cliquei, iniciei o código mais não está dando certo, Obrigado.
       
      index.php
      <?php if (is_array($products)) { foreach ($products as $id => $row) { ?> <div class="col-sm-6 col-md-4 col-lg-3 mb-2"> <div class="card-deck"> <div class="card p-2 border-secondary mb-2"> <a href="product.php?id=<?= $row['product_id'] ?>"> <div class="hover-image"> <img class="card-img-top border-secondary" src="images/<?= $row['product_image'] ?>"/> <a href="#"><span class="texto"></span></a> </div> </a> <h3 class="text-center"><?= $row['product_name'] ?></h3> <div class="text-center text-black rounded p-1" style="font-size: 20px;">Valor&nbsp;$<?= $row['product_price'] ?></div> <button class="btn btn-success btn-block" type="button" value="Add to cart" onclick="cart.add(<?= $row['product_id'] ?>);">Adicionar ao carrinho</button> </div> </div> </div> <?php } } else { echo "No products found."; } ?>  
      product.php
      <?php $products = $_GET["product_id"]; if (is_array($products)) { foreach ($products as $id => $row) { }}; $row['product_name'] ?>  
    • By renan mafra
      Olá pessoal,

      Eu estou criando uma página .htm simples, e quero que nessa página o texto seja de uma fonte especifica, no meu caso
      GeneveNrw incorporada à página, eu peguei a fonte genevaNrw.ttf e coloquei na pasta font-geneva-nrw, acontece que
      não está rolando..., eu tento visualizar no desktop e aparece uma fonte padrão..., eu botei no IIS e aparece uma fonte padrão,
      eu fui no mime do IIS e tá habilitado formato .ttf, eu botei no Apache e também nada, pessoal me deem um help !
       
      segue o código:

       
      <!doctype html> <html> <head> <meta charset="utf-8"> <title>Documento sem título</title> <style> @font-face { font-family: 'GenevaNrw'; src: url('font-geneva-nrw/GenevaNrw.ttf'); } .titulo{ font-family: GenevaNrw; font-weight: bold; font-size: 22px; text-decoration: underline; margin-top: 17px; margin-left: 35px; } ........ ........ </style> </head> <body> <div class="container"> <div class="topo"> <div class="topo_aba"><img src="imagens/borda-esquerda.gif" width="78" height="68" border="0"></div> <div class="topo_estrelas"><img src="imagens/estrelas-direito.gif" width="112" height="24" border="0" class="img-right"></div> </div> <div class="titulo">RECEITAS DE TORTAS</div> </div> </body> </html> Estou utilizando o Dreamweaver e no mostrar visualização do programa aparece.... só lá... do resto nada.
      abraço !!!
    • By Sidwick
      Boa noite pessoal, tudo bem? 

      Estou com um site simples que peguei na internet, ele basicamente é um site de share via WhatsApp, o usuario responde algumas perguntas e no final ele é redirecionado ao WhatsApp na área de contatos para você selecionar os contatos e enviar uma mensagem. 

      O meu grande problema é que não consigo mudar o texto que aparece depois que seleciono os contatos... Já olhei todos os arquivos e não encontro código nenhum que remeta a essa mensagem que aparece após selecionar os contatos... 

      Alguém poderia me dar uma ajuda? 
    • By lemao_code()
      Bom dia Galera, não sei se este é a div certa para a postagem (div sacou?)
      Mas vamos lá,
      A uns 2meses to estudando linguagens de programação, comecei pela Logica de Programação com o professor Guanabara,Agora estou em Python e HTML5 CSS e Java.
      Python estou no que o professor chama de Mundo 2, aprendendo if, elif, else, já sei operadores aritméticos etc.
      HTML5 está mais no inicio, to aprendendo a trabalha com o css para dar estilo na pagina.(Também sei Banco de Dados no MySQL)
      Mas vamos ao assunto, to procurando colegas que estejam na parecida situação como eu, para realmente estudarmos juntos.
      Certa vez o professor falou que isso ajudaria e muito, e concordo, alguém para ajudar, e alguem para você ajudar, é um crescimento e tanto, então convido-os quem tiver interesse
      duas cabeças pensam mais que 1. (ou não se a outra cabeça for de um gênio!Jobs,BIl,Einsten,Hawking esses cara kk)
      Geralmente, estudos das 4h manhã ate as 6hrs da manhã, depois a noite das 19 até a hora que os olhos sangrarem!
       
      Pode mandar msg aqui no meu perfil, estou online!
      Obrigado!
    • By joaovitor102
      <?php require_once '../App/auth.php'; require_once '../layout/script.php'; require_once '../App/Models/vendas.class.php'; require_once '../App/Models/cliente.class.php'; require_once '../App/Models/connect.php'; require '../layout/alert.php'; echo $head; echo $header; echo $aside; echo '<div class="content-wrapper"> <!-- Content Header (Page header) --> <section class="content-header"> <h1> Todos os produtos </h1> <ol class="breadcrumb"> <li><a href="../"><i class="fa fa-dashboard"></i> inicio</a></li> <li class="active">Itens</li> </ol> </section> <!-- Main content --> <section class="content"> '; echo " <form action='../App/Database/Vervendas.php' method='post'> <div class='form-group has-feedback'> <input type='number' name='Dia' style='width:50px;' id='dia' placeholder='dia'><b>/</b> <input type='number' name='Mes' style='width:50px;' id='mes' placeholder='mes'><b>/</b> <input type='number' name='Ano' style='width:100px; id='ano''placeholder='ano'> <button type='submit'>Envia</button> </div> </form> "; echo '</div>'; echo '</section>'; echo '</div>'; echo $footer; echo $javascript; ?> public function ListaVendas($dia,$mes,$ano){ $item="SELECT * FROM `itens`,`Vendas`,`produtos` WHERE `iditem`=`idItens` and `Produto_CodRefProduto`=`CodRefProduto` and `datareg`='$ano'-'$mes'-'$dia'"; return $item; } <?php require_once '../../App/auth.php'; require_once '../../App/Models/vendas.class.php'; if(isset($_POST['dia']) && isset($_POST['mes']) && isset($_POST['ano'])) { $dia=$_POST['dia']; $mes=$_POST['mes']; $ano=$_POST['ano']; $vendas=new Vendas; $dados=$vendas->ListaVendas($dia,$mes,$ano); $limite=mysql_query("$dados"); while ($dados =mysql_fetch_array($limite) ) { $valor=$dados['valor']; $data=$dados['datareg']; $produto=$dados['NomeProduto']; echo "<div > <td>valor:' . $valor . '</td> <td>dia:' . $data. '</td> <td>nome produto:' . $produto . '</td>'; </div>"; $valores+=$valores; } echo "<div> <td>'.$valores.'</td> </div>"; } else{exit;} ?> esta dando erro no programa
×

Important Information

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