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 9×9 grid. I am making a game out of this.
<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:
<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>
In order to change the CSS Elements.