Estou tentando fazer um código para gerar número aleatório em javaScript, coloquei um botão para poder chamar a função, chama a função corretamente, entretanto tenho que atualizar a página para poder visualizar o botão, gostaria de deixar o botão fixo sem precisar atualizar a tela, mas não está dando certo. Segue o código
<html>
<head>
<title>Numero aleatorio</title>
</head>
<body>
<script>
function Mudarestado(el){
document.getElementById("minhaDiv").innerHTML = 'limite';
limite = 5;
n = parseInt(Math.random()*limite); // limite não incluso
tabela = '<table border=1>';
tabela +='<tr>';
tabela +='<td>Numero Sorteado: </td>';
tabela +='<td>'+n+'</td>';
tabela +='</tr>';
tabela +='</table><br><br>';
document.write(tabela);
document.write('Frutas: ('+n+')')
if (n==5){
document.write('Numero 5 foi sorteado!!!')
}
}
</script><br><br>
<script type="text/javascript">
$(document).ready(function (e) {
$("#minhaDiv").hide();
$("#nav-button").click(function (e) {
$("#minhaDiv").toggle();
});
});
</script>
<div id="minhaDiv">
<button type="button" id="nav-button" onclick="Mudarestado('minhaDiv')">Sortear número</button>
</div>
</body>
</html>
<html>
<head>
<title>Joao e Maria</title>
</head>
<body>
<script>
function Mudarestado(el){
document.getElementById("minhaDiv").innerHTML = 'limite';
limite = 5;
n = parseInt(Math.random()*limite); // limite não incluso
tabela = '<table border=1>';
tabela +='<tr>';
tabela +='<td>Numero Sorteado: </td>';
tabela +='<td>'+n+'</td>';
tabela +='</tr>';
tabela +='</table><br><br>';
document.write(tabela);
document.write('Frutas: ('+n+')')
if (n==5){
document.write('Numero 5 foi sorteado!!!')
}
}
</script><br><br>
<script type="text/javascript">
$(document).ready(function (e) {
$("#minhaDiv").hide();
$("#nav-button").click(function (e) {
$("#minhaDiv").toggle();
});
});
</script>
<div id="minhaDiv">
<button type="button" id="nav-button" onclick="Mudarestado('minhaDiv')">Sortear número</button>
</div>
</body>
</html>