Imprimir variável em Javascript na tela

Usurname · Junho 28, 2017

Estou tentando fazer um sistema de turnos que aparece na tela. O contador conta de 60 a 0 e assim sucetivamente. Quando chega no 0 ele adiciona 3 turnos na variável "Turno". O código está em Javascript:

<script type="text/javascript">

var Turno = 0;	

var intervalo = window.setInterval('funcao()',1000);
var contador = 0;


function funcao()
{    
   while (contador <= 60)
   {   
	   if (contador == 0)
	   {
	      contador = 60;
		  Turno = Turno + 3;
		  break;
	   }
	   elementosHTML = document.getElementsByClassName("relativo");
                        
	   elementosHTML[0].innerHTML = "   " + " " +contador;

	   contador--;
	   break;
   }
   
   
}
  
</div>

E aqui eu tenho um código tentando mostrar na tela a variável "Turno". Porém não estou conseguindo mostrar na tela a variável.

<p id="id" class="Turno"></p>
<script type="text/javascript">
var Turno = 0;
   document.getElementById("id").innerHTML  = Turno;
</script>

Se eu coloco o código pra imprimir na tela a variável "Turno" ANTES da função, a função não atualiza a variável. E se eu coloco o código pra mostrar a variável "Turno" na tela depois da função, ele atualiza a contagem mas não atualiza a variável e "retira" a variável da tela porque ele atualiza a tela.

Alguém pode me ajudar a imprimir na tela?

O código completo está aqui:

<html>
<head>
<title>Título</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
	.texto {color:#B000FF;}
	
.static
{
	position:static;
}
.relativo
{
	position: relative;
	top: 1px;
	left: 30px;
	background-color: black;
	color: white;
	width: 40px;
	height: 30px;	
}
.PalavraTurno
{
	position: relative;
	top: 30px;
	left: 30px;
	background-color: black;
	color: white;
	width: 40px;
	height: 30px;	
}
.TurnosDisponiveis
{
	position: relative;
	position: center;
	top: 100px;
	left: 30px;
	background-color: black;
	color: white;
	width: 130px;
	height: 30px;	
}
.Turno
{
	position: relative;
	position: center;
	top: 100px;
	left: 30px;
	background-color: black;
	color: white;
	width: 130px;
	height: 30px;
}
</style>
</head>
<body>



<div class="PalavraTurno">
Turno
</div>

<div class="TurnosDisponiveis">
Turnos Disponíveis:


<script type="text/javascript">
var Turno = 0;
</script>

<?php
//echo '<script type="text/javascript">'  '</script>'
?>

</div>

<div class="relativo">


<script type="text/javascript">

//var Turno = 0;	

var intervalo = window.setInterval('funcao()',1000);
var contador = 60;


function funcao()
{ 
   //window.alert("Ola");
   //document.write("Ola mundo");
   //document.write(intervalo);
   
   while (contador <= 60)
   {   
	   if (contador == 0)
	   {
	      contador = 60;
		  Turno = Turno + 3;
		  break;
		  //document.write("<br>"); 
		  
	   }
	   elementosHTML = document.getElementsByClassName("relativo");
	   //document.write("<div class='relativo'>");
	   //document.write(contador);	
	   elementosHTML[0].innerHTML = "   " + " " +contador;

	   //window.location.reload();
	   //document.write("</div>");
	   contador--;
	   //window.location.reload();
	   break;
   }
   
   
}

</script>

<p id="id" class="Turno"></p>
<script type="text/javascript">
var Turno = 0;
   // elementosHTML[0].innerHTML = 3;
   document.getElementById("id").innerHTML  = Turno;
</script>



<?php


?>

</body>
</html>

Obrigado.

Editado Junho 28, 2017 por Usurname

Usurname · Junho 29, 2017

Consegui. O código está funcionando. Falta melhorar a parte visual e a operacionalidade.

O código completo está aqui:

<html>
<head>
<title>Título</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
	.texto {color:#B000FF;}
	
.static
{
	position:static;
}
.relativo
{
	position: relative;
	top: 1px;
	left: 30px;
	background-color: black;
	color: white;
	width: 40px;
	height: 30px;	
}
.PalavraTurno
{
	position: relative;
	top: 30px;
	left: 30px;
	background-color: black;
	color: white;
	width: 40px;
	height: 30px;	
}
.TurnosDisponiveis
{
	position: relative;
	position: center;
	top: 100px;
	left: 30px;
	background-color: black;
	color: white;
	width: 130px;
	height: 40px;	
}
.Turno
{
	position: relative;
	position: center;
	top: 100px;
	left: 30px;
	background-color: black;
	color: white;
	width: 130px;
	height: 30px;
}
.PainelSuperiorRecursos
{
	position: relative;
	position: center;
	top: 10px;
	left: 300px;
	background-color: black;
	color: white;
	width: 900px;
	height: 60px;
}
.PainelOuro
{
}
.PainelComida
{
}
.PainelMadeira
{
}
.PainelFerro
{
}
.PainelPedra
{
}
</style>
</head>
<body>

<div class = "PainelSuperiorRecursos">
Recursos
</div>


<div class="PalavraTurno">
Turno
</div>


<div class="TurnosDisponiveis">
Turnos Disponíveis:
</div>

<div class="Turno">



<script type="text/javascript">

</script>


</div>

<div class="relativo">


<script type="text/javascript">


var intervalo = window.setInterval('funcao()',1000);
var contador = 60;
var Turno = 0;

function funcao()
{ 
   while (contador <= 60)
   {   
	   if (contador == 0)
	   {
	      contador = 60;
		  Turno = Turno + 3;
		  break;
	   }
	   elementosHTML = document.getElementsByClassName("relativo");
	
	   elementosHTML[0].innerHTML = "   " + " " +contador;

	   contador--;
	    
	   break;
   }
   elementoTurno = document.getElementsByClassName("Turno");
   elementoTurno[0].innerHTML  = Turno;
}

</script>

<script type="text/javascript">



</script>


<?php


?>

</body>
</html>

Uma imagem do sistema:

Obrigado.

Editado Junho 29, 2017 por Usurname

Entrar

Imprimir variável em Javascript na tela

Pergunta

Usurname

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Usurname

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades