Div with a simple variable height

Question

So, I want to make a div that has the height of a value I'm going to get from my database. To make it better do understand, the value is a the number of times a client has bought in the website. I'm thinking of a way to make my div go up as the value go up.

Something like this:

var divHeight = numberOfValues;
numberOfValues = heightOfDiv; (div's height property)

if (numberOfValues == 0) {
   divHeight = 0;
} else {
    divHeight = numberOfValues + 10;
}

The logic is to have my div increase in 10px for every value number. So if the value is 10 the height should be 100px.

What is the best way for me to achieve this solution? Is it as simple as I think? (Simple != easy).

Answer 1

<?php
$numberOfPurchases = getNumberOfPurchases(); // call the function that queries the database
?>
<script>
var defaultDivHeight = 10;
var purchaseDiv = document.getElementById('purchaseDiv');
if (<?= numberOfPurchases; ?> > 0)
{
    purchaseDiv.style.height = <?= numberOfPurchases; ?> * defaultDivHeight + 'px';
}
else
{
    purchaseDiv.style.height = defaultDivHeight + 'px';
}
</script>

I suggest looking into using PDO in PHP for querying the database.

Answer 2

    <script>
       var divHeight = numOfVisits * 10;
       var divDisplay = document.getElementById("display");

       if(divHeight>0)
              divDisplay.style.height = divHeight + "px";
       else
              divDisplay.style.height = "1px";
    </script>