Jump to content

Why does my javascript not work!


Renlok

Recommended Posts

This is really getting on my nerves i cant get any javascript to work with any browser. Am i just doing it all wrong or is it my computer.

 

well this is the code i was trying to get to work

var raterbox = document.getElementById("rater");
var xzero = raterbox.style.left;
var yzero = raterbox.style.top;
document.getElementById("box").InnerHTML = xzero;
alert(yzero);

 

and this is an uploaded version http://mangabucket.com/misc/zarioth/temp/test.html

Link to comment
https://forums.phpfreaks.com/topic/109936-why-does-my-javascript-not-work/
Share on other sites

you can't call document.getElementById("rater"); above the actual dom element because it doesn't exist yet...add it to an onload:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<script type="text/javascript">
  window.onload = function ( ) {
    var raterbox = document.getElementById("rater");
    var xzero = raterbox.style.left;
    var yzero = raterbox.style.top;
    document.getElementById("box").InnerHTML = xzero;
    //var x = sqrt(18^2 - (y - 20)^2) + 20;
    //var y = sqrt(18^2 - (x - 20)^2) + 20;
    alert(yzero);
  }
</script>
<style type="text/css">
#rater{
background:url(circle.gif);
width:41px;
height:41px;
border:#000000 thin solid;
}
#rateball{
background:url(ball.gif);
width:15px;
height:15px;
position:relative;
top:5px;
left:5px;
}
</style>
</head>

<body>
<div id="rater">
    <div id="rateball"></div>
</div>

<div id="box"></div>
</body>
</html>

raterbox.style.left can only read inline styles. make the top & left style attributes inline and remove them from the style block:

 

    <div id="rateball" style="top:5px;left:5px;"></div>

 

or don't specify them at all, and in your JS, test for the top/left values. if you don't find them, you know it's the first time running, and default them to 5x5

oh ok i got that part to work but now im stuck again

 

window.onload = function ( ) {
var rateball = document.getElementById("rateball");
var rater = document.getElementById("rateball");
var xzero = rater.style.left;
var yzero = rater.style.top;
yzero = yzero - 41;
//get zero point
var y = yzero + 20;
var x = xzero + Math.sqrt(324 - (y - 20)*(y - 20)) + 20;
rateball.style.left = x+'px';
alert(x);
rateball.style.top = y+'px';
alert(y);
}

 

It returns x + y to equal 5pxNaN20 and NaN and i've no idea why

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.