Implementing JS code to change CSS elements

Question

This is a code excerpt from my program, and I would like to know how o change this in order to adjust the top and left values by using JS variables in the tag which is above it in order to randomize its position in a 9x9 grid. I have already tried using code such as h1.style.left = ${left}%; but it's simply not working for me.

<style>
            #backgroundColor {
                background-color: rgba(211, 233, 254, 0.779);
                margin-top: 5%;
            }

            #content {
                text-align: center;
                width: 100%;
            }
/* I want to change the top and left values to correspond with JS variables. */
            h1 {
                position: absolute;
                top: 1.75%;
                /* Alter values in a grid by 10.75. Make a varible in <script>, go from 1.75-87.75 */
                left: 27.25%;
                /* Alter values in a grid by 5.5. Make a variable in <script>, go from 27.25-71.25 */
                color: rgb(47, 0, 0)
            }

            div {
                position: relative;
                text-align: center;
            }

            image {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            
            .center {
                display: block;
                margin-left: auto;
                margin-right: auto;
                width: 50%;
            }

            .numbers {
                font-family: monospace;
                font-size: xx-large;
                font-weight: normal;
                font: Menlo;
            }

            .title {
                font-family: monospace;
                font-style: italic;
                font-weight: lighter;
                font-size: xx-large;
            }

            .subtitle {
                font-family: monospace;
                font: Courier;
                font-size: large;
                font-weight: lighter;
            }
        </style>

I tried using the following JS Code, but it did not work. Any solutions?

<script type="text/javascript">
    "use strict";
            function getNumCoords(ifX, ifY) {
                const numGridMax = 8;
                var yPos = Math.floor(Math.random()*numGridMax);
                var xPos = Math.floor(Math.random()*numGridMax);
                if (ifX === 1) {
                    return (xPos*5.5)+27.25;
                }
                if (ifX === 1) {
                    return (yPos*10.75)+1.75;
                }
            }
            var outputX = getNumCoords(1, 0) + "%";
            var outputY = getNumCoords(0, 1) + "%";
            var number = document.getElementById("random");

    </script>

Answer 1

Here is an example. Note that the left value must be a string, using a template literal works nicely.

const h1 = document.getElementById("h1");
let left = 0;

function mover() {
  if (left < 100) {
    left += 10;
    h1.style.left = `${left}px`;
  } else {
    clearInterval(interval);
    h1.textContent = "Done";
  }
}
const interval = setInterval(mover, 1000);

h1 {
  color: #008;
  position: relative;
  left: 0;
}

<h1 id="h1">Header</h1>