Publicado em 19 de fev.

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

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:

/applications/core/interface/imageproxy/imageproxy.php?img=http://img443.imageshack.us/img443/7445/paginaq.jpg&key=7e616c4eb7cd27bf5068aa2e0e383baaacdaabb3b4d6b729289f4897a18f1a50" alt="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
}

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

William Bruno· 19 de fev.

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:

Rick Makinary· 19 de fev.

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.

William Bruno· 20 de fev.

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';

Evandro Oliveira· 20 de fev.

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');