Problema 1:
Normalmente document.write
é usado em JS para compor partes de uma página durante sua carga.
Ocorre que sua função está sendo chamada depois do HTML original já ter sido servido e o DOM já montado. Isso faz com que implicitamente, na primeira ocorrência, seja chamado um document.open
, efetivamente sobreescrevendo o documento original.
Problema 2:
Mesmo resolvendo esta parte, ainda tem o problema do botão enviar o form (é o comportamento do button
), o que pode não ser desejável nesse caso.
Solução substituindo o document.write
por innerHTML
:
Uma possível solução para criar HTML é substituindo o conteúdo de um elemento, por exemplo desta forma:
function Gerar() {
output = document.getElementById('output');
output .innerHTML = '<table>'; // Primeiro usamos =
output .innerHTML += '<tr>'; // depois += para acrescentar
output .innerHTML += '<td>celula</td>';
output .innerHTML += '</tr>';
output .innerHTML += '</table>';
}
<body>
<div id="titulo">
<h1>Caça-Palavras</h1>
<form>
Conteudo da pagina<br>
<button type="button" onClick="Gerar()">Gerar</button>
<div id="output"></div>
</form>
</div>
</body>
</html>