How to use JavaScript Math.random() within HTML p tag-CodePudding

I am trying to print 1 random number within my <p> in HTML.

JavaScript:

function number() 
{
    var minNumber = 1; // The minimum number you want 
    var maxNumber = 5; // The maximum number you want
    var randomNumber = Math.floor(Math.random() * (maxNumber   1)   minNumber); // Generates random number

    document.getElementById("randomNum").innerHTML = randomNumber; // Sets content of <div> to number

    return false; // Returns false just to tidy everything up
}

window.onload = number; // Runs the function on click

HTML:

<div class = card>
  <div id="randomNum">
    <h2>Header</h2>
    <p>stats - [randomNumber] <br/> stat 2 - [randomNumber] </p>
  </div>
</div>

(I could not get my HTML to post normally so I had to make it ugly. Sorry...)

My random number will print off to the side, and it is unable to print more within the same p. I was wondering if there is a way to place my random number from JavaScript within my p in HTML and keep all the css settings within the other div class card.

Thank you!

CodePudding user response：

If I understand your question correctly, you want to place the random number in the p instead of the div, and have it append each time.

You should create an element each time with document.createElement and append it to the div, like this

function number() 
{
    var minNumber = 1; // The minimum number you want 
    var maxNumber = 5; // The maximum number you want
    var randomNumber = Math.floor(Math.random() * (maxNumber   1)   minNumber); // Generates random number

    var newNumber = document.createElement("p");
    newNumber.innerText = randomNumber;

    document.getElementById("randomNum").appendChild(newNumber);

    return false; // Returns false just to tidy everything up
}

CodePudding user response：

function number() 
{
    var minNumber = 1; // The minimum number you want 
    var maxNumber = 5; // The maximum number you want
    var randomNumber = Math.floor(Math.random() * (maxNumber   1)   minNumber); // Generates random number

    //document.getElementById("randomNum").innerHTML = randomNumber; // Sets content of <div> to number
    var x = document.getElementsByClassName("randNum");
    x[0].innerHTML = randomNumber;
    x[1].innerHTML = randomNumber;

    return false; // Returns false just to tidy everything up
}

window.onload = number; // Runs the function on click

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

<div class = card>
  <div id="randomNum">
    <h2>Header</h2>
    <p>stats - <span class="randNum"></span> <br/> stat 2 - <span class="randNum"></span> </p>
  </div>
</div>

</body>
</html>

CodePudding user response：

You have to give the P element a ID, then do a document.getElementbyID(whatever you put the ID for in the P tag) = randomNumber Your Html should be

<p id="whatever you want"></p>

Hopefully that helps.