0

Criei um script básico para gerar um valor aleatório de 1 a 100. Mas, quando eu abria o html na qual eu criei o script ele só aparecia no console da pagina e não na pagina na qual eu criei. Como faria para o resultado aparecer na tela?

<html>
<script>

function rollDice() {
  let roll = Math.floor(Math.random() * 100) + 1;
  console.log(`Rolled: ${roll}`);
}

rollDice()
</script>

</html>
5
  • Isto responde à sua pergunta? Criar elemento no HTML com JavaScript (appendChild vs innerHTML)
    – BrTkCa
    Commented 7/01/2021 às 21:21
  • Coloca essa linha na função document.write("<span style='color:red'>Rolled:"+roll+"</span>");
    – user60252
    Commented 7/01/2021 às 21:37
  • Nem precisa de função basta colocar o script onde quer que apareça na página <script>let roll = Math.floor(Math.random() * 100) + 1; document.write("<span style='color:red'>Rolled:"+roll+"</span>");</script>
    – user60252
    Commented 7/01/2021 às 21:49
  • mais Leo eu estou implementando esse script e um outro html mais exatamente: eu coloco esse script em um input e quando eu clico no input a pagina ela recarrega e fica completamente branca e com somente o valor do dado você consegue ajeitar isso?
    – almeidaab
    Commented 7/01/2021 às 22:06
  • <input type="image" src="img/dice.png" id="sanibotao" onclick="rollDice()"> eu coloquei seu codigo em function para testar
    – almeidaab
    Commented 7/01/2021 às 22:07

2 Respostas 2

1

Você pode criar um elemento HTML via Javascript e adicionar o número no elemento criado.

Exemplo:

function rollDice() {
  let roll = Math.floor(Math.random() * 100) + 1;
  console.log(`Rolled: ${roll}`);
  let span = document.createElement('span');
  span.innerHTML = 'Numero Random: ' + roll
  document.body.appendChild(span)
}

rollDice()

Explicando o codigo:

  1. https://developer.mozilla.org/pt-BR/docs/Web/API/Document/createElement

    let span = document.createElement('span');

Em um documento HTML, o método Document.createElement() cria o elemento HTML especificado ou um HTMLUnknownElement se o nome do elemento dado não for conhecido.

  1. https://developer.mozilla.org/pt-BR/docs/Web/API/Element/innerHTML

    span.innerHTML = 'Numero Random: ' + roll

A propriedade Element.innerHTML define ou obtém a sintaxe HTML ou XML descrevendo os elementos descendentes.

  1. https://developer.mozilla.org/pt-BR/docs/Web/API/Node/appendChild

    document.body.appendChild(span)

Adiciona um nó ao final da lista de filhos de um nó pai especificado. Se o nó já existir no documento, ele é removido de seu nó pai atual antes de ser adicionado ao novo pai.

0

Cara, peguei o seu código e refiz com algumas alterações, segue abaixo:

 <div id = random> </div>
        <script>
            function rollDice() {
            let roll = Math.floor(Math.random() * 100) + 1;
            return roll;
            }
            document.getElementById("random").innerHTML = rollDice();
            
        </script>

Pra ser mostrado no documento html vc precisa utilizar o innerHTML por meio do um elemento DOM getElementById.

3
  • mais estou tentando botar isso em um input para quando eu apertar esse input rodar um valor aleatório coloquei o valor "random" no input e não funcionou, oque eu coloco para trocar o valor
    – almeidaab
    Commented 7/01/2021 às 23:07
  • <input type="image" src="img/dice.png" id="sanibotao" onclick="random">
    – almeidaab
    Commented 7/01/2021 às 23:07
  • Cara, realmente o resultado tem que ser mostrada no input? Eu pergunto isso porque ao pé da letra o a tag 'input' ele foi designado para receber uma entrada ou melhor informações em vários formatos. Sendo eles de texto, imagens, data e etc. Commented 8/01/2021 às 18:37

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