My simple Javascript code is working on Safari, but not Chrome, Firefox nor Opera, Whats wrong?

Question

The Javascript below doesn't seem to work on Chrome, Firefox and Opera.

<html>
<script>
function window_onLoad(){
  var ang;
  var i;
  imgMid.style.posLeft = document.body.clientWidth / 2;
  imgMid.style.posTop = document.body.clientHeight / 2;
  ang = 6.2 / 8;
  Position(div1, ang);
  Position(div2, ang * 2);
  Position(div3, ang * 3);
  Position(div4, ang * 4);
  Position(div5, ang * 5);
  Position(div6, ang * 6);
  Position(div7, ang * 7);
  Position(div8, ang * 8);
}

function Position(objO, a){
  objO.style.posLeft = imgMid.style.posLeft + Math.sin(a) * 200;
  objO.style.posTop = imgMid.style.posTop - Math.cos(a) * 200;
}
</script>

<body onload="window_onLoad()">
  <img id=imgMid style="position: absolute;" src="dot.gif" />
  <div id=div1 style="position: absolute;">1</div>
  <div id=div2 style="position: absolute;">2</div>
  <div id=div3 style="position: absolute;">3</div>
  <div id=div4 style="position: absolute;">4</div>
  <div id=div5 style="position: absolute;">5</div>
  <div id=div6 style="position: absolute;">6</div>
  <div id=div7 style="position: absolute;">7</div>
  <div id=div8 style="position: absolute;">8</div>
</body>
</html>

As a result it shows as imgMid and the numbers in the top right hand corner, however in Safari it appears as a circle of numbers around imgMid, as it is meant to.

I don't know if this is the issue but you should place your ` — Mike Cluck, Apr 13 '16 at 21:48
don't use quotes where there isn't one meant to be ;) (referring to the edit I made to your question, *not* related to code)... — benomatis, Apr 13 '16 at 21:52
The proper names of the `style` properties are `top` and `left`, not `posTop` and `posLeft`. Also, you should be using numbers with explicit units ("px") appended. — Pointy, Apr 13 '16 at 21:53
@MikeC in this case it shouldn't matter as the browser will create the head element around the script tag. — evolutionxbox, Apr 13 '16 at 22:09

score 1 · Answer 1 · edited May 23 '17 at 11:59

1

Don't use onevent HTML attributes.

Besides, load is a window event, it shouldn't fire on body. Use DOMContentLoaded event on document instead:

document.addEventListener("DOMContentLoaded", window_onLoad})

edited May 23 '17 at 11:59

Community

1
1

answered Apr 13 '16 at 21:47

Michał Perłakowski

88,409
26
156
177

1

This has nothing whatsoever to do with the problem. – Pointy Apr 13 '16 at 21:50
1

@Pointy well, it does, a little, as the OP does use `onevert` HTML attributes, but it isn't really an answer to the question, I agree... – benomatis Apr 13 '16 at 21:56

Hirad Nikoo · Accepted Answer · 2016-04-13T22:14:39.773

0

Ok after finding out what you actually intended to do I did a little coding so this is what I came up with:

function window_onLoad(){
  var ang;
  var i;
  imgMid.style.left = document.body.clientWidth / 2;
  imgMid.style.top = document.body.clientHeight / 2;
  ang = 6.2 / 8;
  for(var i = 1 ; i < 9 ; i++)
     Position('div' + i, ang * i);
}
function getInt(value){
  return parseInt(value.replace('px', ''), 10);
}
function Position(id, a){
  var objO = document.getElementById(id);
  var imgMid = document.getElementById('imgMid');
  objO.style.left = getInt(imgMid.style.left) + Math.sin(a) * 200 + 'px';
  objO.style.top = getInt(imgMid.style.top) - Math.cos(a) * 200 + 'px';
}

And also one important thing: put all the content in a div if you want them to be centered!

edited Apr 13 '16 at 22:14

answered Apr 13 '16 at 21:55

Hirad Nikoo

1,599
16
26

Call position in a loop! Come on why repeat a line of code nine times?! – evolutionxbox Apr 13 '16 at 22:11
You are right but I already changed some codes didn't want to complicate it more. But you are right. I'll change it now. – Hirad Nikoo Apr 13 '16 at 22:13
No, don't worry... When someone is right is right... and you were right. ;) – Hirad Nikoo Apr 13 '16 at 22:15

My simple Javascript code is working on Safari, but not Chrome, Firefox nor Opera, Whats wrong?

2 Answers2