0

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>

2 Respostas 2

2

Você não está atualizando a tela. Esse efeito se dá já que você está utilizando o document.write para escrever na tela.

O funcionamento do document.write é simples: basicamente, enquanto a página está carregando, ele insere o conteúdo normalmente sem alterar o restante da página. No entanto, se o documento já foi 100% carregado, quando o document.write for invocado, todo o conteúdo da página será substituído pelo conteúdo que você passou como argumento para esse método. Você pode saber mais sobre essa API aqui.

Então, para resolver isso, você tem que usar algo além do document.write. Vamos usar a técnica de criar um novo elemento e em seguida inseri-lo ao final da página.

Algo assim:

function sortNum() {
  // Gera um número aleatório no intervalo 0~99:
  const random = Math.floor(Math.random() * 100)
  
  // Cria um elemento <div>:
  const div = document.createElement('div')
  
  // Adiciona o número escolhido como texto da <div>:
  div.textContent = random
  
  // Adiciona (append) a <div> criada ao final do <body>:
  document.body.appendChild(div)
}
<button id="my-button" onclick="sortNum()">Sortear um Número</button>

0

Quando usa document.write() ele sobrescreve o conteúdo da página, por isso seu botão some.

Crie um div para receber o resultado e então modifique a propriedade innerHTML para mudar o conteúdo do div.

    
<html>
    <head>
    	<title>Numero aleatório</title>
    </head>

<body>
    <script>
    function Mudarestado(el){
    

      limite = 5;
      document.getElementById("resultadoDiv").innerHTML = 'limite = ' + limite ;
      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.getElementById("resultadoDiv").innerHTML += tabela;
    
      document.getElementById("resultadoDiv").innerHTML += 'Frutas: ('+n+')';
      if (n==5){
        document.getElementById("resultadoDiv").innerHTML += 'Numero 5 foi sorteado!!!';
      }


    }

    </script><br><br>



    <div id="minhaDiv">
    <button type="button" id="nav-button" onclick="Mudarestado('minhaDiv')">Sortear número</button>
    </div>
    
    <div id="resultadoDiv">
       Sorteio
    </div>
    

</body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .