Display JS script result in Bootstrap color box

Question

I want to display random numbers by JS calculation in CSS Bootstrap colored box as shown below. How can I structure my code by adding the following JS calculation in Bootstrap colored box??

Code for colored box in Bootstrap:

<div class="row align-items-center number-row">
  <div class="col-5"> </div>
  <div class="col-2 p-3 mb-2 bg-secondary text-white">327</div>
  <div class="col-5"> </div>
</div>

JS code :

<h2>JavaScript Math</h2>

<p id="demo"></p>

<script>
    function maths 
    let x = Math.floor((Math.random() * 1000) + 1);
    document.getElementById("demo").innerHTML = x;
</script>

CSS color box

Answer 1

You are setting the value of a p tag. Change that tag for your desired color box:

<h2>JavaScript Math</h2>

<div class="row align-items-center number-row">
  <div class="col-5"> </div>
  <div id="demo" class="col-2 p-3 mb-2 bg-secondary text-white"></div>
  <div class="col-5"> </div>
</div>

And same JavaScript:

let x = Math.floor((Math.random() * 1000) + 1);
document.getElementById("demo").innerHTML = x;