By clicking the button to call function Avascript the sume button

Asked

Viewed 1,240 times

0

I’m trying to make a code to generate random number in Avascript, put a button to call the function, call the function correctly, however I have to update the page to be able to view the button, I would like to leave the button fixed without having to update the screen, but it’s not working. Follows 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>
javascript random-numbers

2 answers

1

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

The functioning of document.write 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 loaded 100% when the document.write is invoked, all page content will be replaced by content you passed as argument for this method. You can learn 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 that:

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


When you use document.write() it overwrites the content of the page, so your button disappears.

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

Browser other questions tagged javascript random-numbers

You are not signed in. Login or sign up in order to post.