Display script variable value in HTML

Asked

Viewed 65 times

0

I created a basic script to generate a random value from 1 to 100. But when I opened the html in which I created the script it only appeared on the page’s console and not on the page I created. How would you make the result appear on the screen?

<html>
<script>

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

rollDice()
</script>

</html>
javascript html css

  • This answers your question? Create HTML element with Javascript (appendchild vs innerHTML)

  • Puts this line in the Document.write("<span style='color:red'>Rolled:"+roll+"</span>");

  • You don’t even need a function just put the script wherever it appears on the <script>Let roll = Math.floor(Math.Random() * 100) + 1; Document.write("<span style='color:red'>Rolled:"+roll+"</span>");</script>

  • more Leo I am implementing this script and another html more exactly: I put this script in an input and when I click the input the page it reloads and turns completely white and with only the data value you can fix it?

  • <input type="image" src="img/Dice.png" id="sanibotao" onclick="rolldice()"> I put your code in Function to test

2 answers

1

You can create an HTML element via Javascript and add the number in the created element.

Example:

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

Explaining the code:

  1. https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

    Let span = Document.createelement('span');

In an HTML document, the Document.createelement() method creates the specified HTML element or an Htmlunknownelement if the given element name is not known.

  1. https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

    span.innerHTML = 'Random number: ' + roll

The Element.innerHTML property defines or obtains the HTML or XML syntax describing the descending elements.

  1. https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

    Document.body.appendchild(span)

Adds a node to the end of the child list of a specified parent node. If the node already exists in the document, it is removed from its current parent node before being added to the new parent.

0

Dude, I took your code and I re-did it with a few changes, follow below:

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

To be shown in the html document you need to use the innerHTML by means of an element GIFT getElementById.

  • but I’m trying to put this in an input so when I hit this input run a random value I put the value "Random" in the input and it didn’t work, what I put to change the value

  • <input type="image" src="img/Dice.png" id="sanibotao" onclick="Random">

  • Dude, does the result really have to be shown in the input? I ask this because to the letter o the tag 'input' he was assigned to receive an input or better information in various formats. Being text, images, date and etc.

Browser other questions tagged javascript html css

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