Renlok Posted June 12, 2008 Share Posted June 12, 2008 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 Quote Link to comment Share on other sites More sharing options...
rhodesa Posted June 12, 2008 Share Posted June 12, 2008 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> Quote Link to comment Share on other sites More sharing options...
Renlok Posted June 12, 2008 Author Share Posted June 12, 2008 ok thanks but now it comes up with a blank alert box, so i guess it thinks yzero = null Quote Link to comment Share on other sites More sharing options...
rhodesa Posted June 12, 2008 Share Posted June 12, 2008 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 Quote Link to comment Share on other sites More sharing options...
Renlok Posted June 12, 2008 Author Share Posted June 12, 2008 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.