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>