By clicking the button to call javaScript function the sum button

Question

By clicking the button to call javaScript function the sum button

I am trying to make a code to generate random number in javaScript, I put a button to be able to call the function, calls the function correctly, however I have to refresh the page to be able to view the button, I would like to leave the button fixed without having to refresh the screen, but it is not working. Follow the Code

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

0

javascript números-aleatórios

Author: It Wasn't Me, 2019-05-05

Source

2 answers

You are not updating the screen. This effect occurs since you are using document.write to write on the screen.

How document.write works is simple: basically, while the page is loading, it inserts the content normally without changing the rest of the page. however, if the document has already been 100% loaded, when document.write is invoked, all page content will be overwritten by the content you passed as an argument to this method. you may know more about this API here.

So to solve this, you have to use something other than document.write. Let's use the technique of creating a new element and then insert it at the bottom of the page.

Something like this:

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>

1

Author: Luiz Felipe, 2019-05-05 21:29:15

score 0 · Accepted Answer

When using document.write() it overwrites the content of the page, so its some button.

Create a div to receive the result and then modify the property innerHTML to change the contents of 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>