Random Image Position in programming website?

Question

I want to make it so I have "enemies" spawn in the background (not THE background, just images on top of it) of a particular webpage at random heights and scroll across the screen. Right now I have something like:

<script>
    function numberRandomizer(){
      var x = Math.floor((Math.random() * 500) + 300); //random number between 300 and 800
      return x;
    }
  </script>

I've tried 2 methods to applying this random variable X to the images that loop by scrolling on screen:

1) Doing what I thought would work and editing each image to get a random value for top and left

  <marquee behavior="scroll" direction="left" scrollamount="numberRandomizer()"><img src="/aboutme/enemy.png" width="120" height="80" top="numberRandomizer()" left="numberRandomizer()"/><p></marquee>

2) Even though as far as I know it would make all enemies have the same position, try out CSS styling to make the placement random just to see if it would work:

 <style>
    img {
      top: numberRandomizer();
      left: numberRandomizer();
    }
  </style>

Neither style works in setting a random value for the image location, am I getting a minor thing wrong or going about this completely the wrong way?

As a bonus question: Is it possible to set marquee to go a random direction per image?

Answer 1

You can make the same thing using plain javascript too

html:

<marquee behavior="scroll" direction="left" id="elem">Test</marquee>
<br/>
<button id="butR">Right</button>
<button id="butL">Left</button>

<div class="area">
<div id="enemy"></div>
</div>

Js:

document.getElementById('butR').addEventListener("click", function(){
    document.getElementById('elem').setAttribute("direction", "right");   
});

document.getElementById('butL').addEventListener("click", function(){
    document.getElementById('elem').setAttribute("direction", "left");   
});

function numberRandomizer(){
  var x = Math.floor((Math.random() * 250) + 50); //random number between 50 and 300
  return x;
}


document.getElementById('enemy').style.top = numberRandomizer() + 'px';
document.getElementById('enemy').style.left = numberRandomizer() + 'px';

I've added also a way to change marque direction. Take a look at this fiddle:

https://jsfiddle.net/oyv324z9/