Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Rick Makinary

[Resolvido] JavaScript apaga todo o conteúdo da página

Por , em Javascript

Recommended Posts

Rick Makinary    0

Rick Makinary
Postado

Eu estou desenvolvendo um joguinho de modo texto em JavaScript e também uma página(toda formatada no CSS) que irá acolhe-lo.

Basicamente ficará mais ou menos assim:

paginaq.jpg

O problema é que quando o script é acionado(que no caso é o aperto de um botão) todo o conteúdo não-javascript da página desaparece, CSS, texto em HTML, imagens, etc, sobra apenas o que é do javascript.

 

Como eu resolvo esse problema?

 

Os códigos fontes estão logo abaixo:

 

index.html

<html>
<head>
<title>Joguinho em texto</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="ways.js"></script>
</head>
<body>
<div id="menu">
	<table>
		<tr>
			<td><a href="index.html"><b>Início</b></a></td>
			<td><b>Tutorial</b></td>
			<td><b>Sobre</b></td>
			<td><b>WebDesigner</b></td>
		</tr>
	</table>
</div>
<div id="game">
	<script type="text/javascript" >
		introduction();
	</script>
</div>
<div id="about"><i>Site criado em 18/02/2011 por Henrique Matheus</i></div>
</body>
</html>

 

style.css

a:link {text-decoration: none; color: gray;}
a:active {text-decoration: none; color: gray;}
a:visited {text-decoration: none; color: gray;}
a:hover {text-decoration: none; color: gray;}

#menu {background-color: navy; position: fixed; left: 0px; right: 0px; top: 0px; bottom: 585px; z-index: 1;}
#about {background-color: navy; position: fixed; left: 0px; right: 0px; bottom: 0px; text-align: center; color: white; z-index: 1;}
#game {position: absolute; top: 25px;}

 

ways.js

function introduction()
{

	document.write("Texto<br>");
	document.write("<form name='form'>");
	document.write("<input type='button' name='option1' value='Começar a jogar'>");
	document.write("<input type='button' name='option2' value='Ver tutorial' onclick='tutorial();'>");
	document.write("</form>");
}
function tutorial()
{
	document.write("Texto<br>");
	//O que tem aqui não é muido diferente do que o da função acima			
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado
quando o script é acionando(que no caso é o aperto de um botão) todo o conteúdo não-javascript da página desaparece, CSS, texto em HTML, imagens, etc, sobra apenas o que é do javascript.

isso é pq olha oque você fez:

 

function tutorial()
	{
		document.write("Texto<br>");

e o botão:

 

<input type='button' name='option2' value='Ver tutorial' onclick='tutorial();'>

 

ou seja, você tenta escrever dentro do botão.

 

direcione para outro lugar:

 

function tutorial()
	{
		document.getElementById('saida').innerHTML = 'Textp<br />';

 

e então tenha esse elemento na página:

<div id="saida"></div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rick Makinary    0

Rick Makinary
Postado

Obrigado, Willian, funcionou. Infelizmente eu tenho que digitar todo o texto(que é um pouquinho grande) numa única linha do document.getElementById().innerHTML = '';, senão não funciona :angry: , mas é assim mesmo. :joia:

 

Obrigadão, cara.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado
Infelizmente eu tenho que digitar todo o texto(que é um pouquinho grande) numa única linha do document.getElementById().innerHTML = '';, senão não funciona :angry: , mas é assim mesmo. :joia:

não, não é 'assim mesmo', basta quebrar a linha e concatenar.

 

assim funciona também:

function tutorial()
{
     document.getElementById('saida').innerHTML = 'Texto<br />'+
          'mais texto'+
          'mais texto';

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

eventos e funções:

 

var saida = document.getElementById('saida');
saida.innerHTML = '....';

var escreve = function(mensagem){
   document.getElementById('saida').innerHTML += mensagem;
}

escreve('oi<br>');
escreve('várias<br>');
escreve('mensagens');

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito