document.getElementById("myB").style.top = "100px";

Question

Is there a way to set style.top to be a variable instead of px?

I want the div to change a absolute position when i push a button to a random value instead of a constant

<div class="dot" id="dot1" style="top:180px;left:280px"></div>

function myFunction1(){
    var x1 = Math.floor((Math.random() * 150) + 75);
    var y1 = Math.floor((Math.random() * 150) + 75);

    console.log(x1);
    console.log(y1);


   //this works
   document.getElementById("dot1").style.top = "100px";
   document.getElementById("dot1").style.top = "100px";

   //this doesnt
   document.getElementById("dot1").style.top = x1;
   document.getElementById("dot1").style.top = y1;
   }

Check if this helps you: https://www.w3schools.com/js/js_htmldom_css.asp — Ramon Portela, May 20 '19 at 12:50
you should set property to `document.getElementById('dot1').style.setProperty(...` — Banzay, May 20 '19 at 12:52
`x1` and `y1`are variables so you shouldn't have quotes around them — Pete, May 20 '19 at 12:55
I didnt get this to work either: document.getElementById('dot1').style.setProperty('top',x1) — Vetlesen, May 20 '19 at 12:58
You can use a variable if you like. Lengths in CSS still need units, so the variable has to include units. — Quentin, May 20 '19 at 13:15

score 0 · Answer 1 · answered May 20 '19 at 12:51

0

document.documentElement.style.top = x1. Same thing with left property.

answered May 20 '19 at 12:51

Bwaxxlo

1,860
13
18

document.getElementById("myB").style.top = "100px";

1 Answers1