Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 352
  • Last Modified:

Debugging Javascript

I'm trying to find an error in some Javascript code.

It says, first, "Warning: Error in parsing value for 'left'.  Declaration dropped.",  then "Warning: Error in parsing value for 'top'.  Declaration dropped." "Warning: Error in parsing value for 'left'.  Declaration dropped." for Dynamicd.html.

I'm trying to have the text alternate between two positions.

Can you give me some hints?
Dynamic.html

<?xml version = "1.0" encoding = "1.0" encoding = "utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">
  <head>
    <title> Dynamic HTML </title>
    <script type = "text/javascript" src = "dynColors.js" >
    </script>
  </head>
  <body>
    <p style = "font-family: Times; font-style:italic;
                font-size: 24pt" >
    </p>
    <form action = "">
      <p>
        <span id = 'text' style =
          "position: absolute; left: 70px; top: 30px;
          
          color: black;"> Background color:
        </span>
        <input type = "button" value = "move"
           onclick =
            "initText()" />
       <br />
     </p>
   </form>
  </body>
</html>


dynColors.js

var domain, x, y, nextx = 70, nexty = 50;
var startx, starty;

function initText()
{

domain = document.getElementById('text').style;

var x = domain.left;
var y = domain.top;
var startx = domain.left;
var starty = domain.top;

x = x.match(/\d+/);
y = y.match(/\d+/);
startx = x;
starty = y;

move(x, y, startx, starty);

}

function move(x, y)
{
 
if(x != nextx)
    x = nextx;
else
    x = startx;
if(y != nexty)
    y = nexty;
else
    y = starty;
domain.left = x + "px";
domain.top = y + "px";
}

Open in new window

0
JCW2
Asked:
JCW2
  • 5
  • 3
  • 2
  • +4
5 Solutions
 
Aaron TomoskyTechnology ConsultantCommented:
Use firefox. Install firebug. It let's you do breakpoints and check variables just like a real debugger
0
 
sjklein42Commented:
Why it isn't working:

You need to decide which variables are global and which are going to be function arguments.  Do not use the same name for both.  You have confused the compiler.

Call "move" with two arguments, or is it four?  Only you know for sure.

Don't do "forward references" in javascript.  The compiler is not multi-pass so functions should be declared before they are called.  Works only sometimes in limited situations.
0
 
aboo_sCommented:
try this for debugging and see what happens:

last two lines of code change to

domain.left ="50px";
domain.top =  "50px";

see if you still the same error or not!
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Dave BaldwinFixer of ProblemsCommented:
The code below has some extra div's to display values from the javascript.  It could work if you keep track of the starting point which it doesn't.  The left/top errors were because you weren't passing startx/starty to move().  In addition, XHTML is not XML and you should not have the XML header in there.
// HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> Dynamic HTML </title>
<script type = "text/javascript" src = "dynColors.js"> </script>

</head>

<body>
<p style = "font-family: Times; font-style:italic;font-size: 24pt">P</p>
<form action = "">
<p>
<span id = 'text' style = "position: absolute; left: 70px; top: 30px; color: black;">Background color:</span>
<input type = "button" value = "move" onclick = "initText()" />
<br />
</p>
</form>

<div id="div_1">??</div>
<div id="div_2">??</div>
<div id="div_3">??</div>

</body>
</html>

// javscript
var domain, x, y, nextx = 70, nexty = 50;
var startx, starty;

function move(x, y, startx, starty)
{
 
if(x != nextx)
    x = nextx;
else
    x = startx;
if(y != nexty)
    y = nexty;
else
    y = starty;
domain.left = x + "px";
domain.top = y + "px";
if (y < 1000) { yy = document.getElementById('div_2');
	yy.innerHTML = domain.left+" : "+domain.top;
	}

}


function initText()
{
domain = document.getElementById('text').style;

var x = domain.left;
var y = domain.top;
var startx = domain.left;
var starty = domain.top;

x = x.match(/\d+/);
y = y.match(/\d+/);
startx = x;
starty = y;
if (y < 1000) {xx = document.getElementById('div_1');
	xx.innerHTML = x+" : "+y;
	}
move(x, y, startx, starty);

}

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
I would not have a breakline after style=

@Dave where do you get the idea that XHTML is not XML???

The above code validates as XML/XHTML if the header is fixed from

<?xml version = "1.0" encoding = "1.0" encoding = "utf-8" ?>

to

<?xml version = "1.0" encoding = "utf-8" ?>
0
 
Dave BaldwinFixer of ProblemsCommented:
While XHTML follows many of the rules of XML for structure, there are many differences starting with stylesheets.  XML also does not have the predefined elements of XHTML with their associated display characteristics.  The W3C and the XHTML.org pages do not include the XML doctype with the XHTML doctype.  And their purposes are different.  XHTML is an extension of HTML to display web pages.  XML is designed to structure and carry data.

You might want to read this from the Webkit people: http://www.webkit.org/blog/68/understanding-html-xml-and-xhtml/
0
 
Michel PlungjanIT ExpertCommented:
Just paste the code into the validator and see it validate
0
 
Dave BaldwinFixer of ProblemsCommented:
If you read that page, you'll see that (according to them) the validator and browsers don't determine the mode and doctype the same way.  I understand what you're saying.  I just don't happen to agree with you.  I use HTML 4.01 Transitional for all my new pages.  Which is what is recommended on that web page from the webkit people.
0
 
Michel PlungjanIT ExpertCommented:
I read the page. It is 5 years old. The world has moved on and so has ie7 and ie8 and ie9
0
 
Michel PlungjanIT ExpertCommented:
Here is a more balanced view which seems to be up to date and has pros and cons: http://en.wikipedia.org/wiki/XHTML
I am not saying you must use xml preamble for xhtml, I am just saying that is is a valid document if the wrong encoding attribute is deleted

Here is a blog from MS http://blogs.msdn.com/b/ie/archive/2010/11/01/xhtml-in-ie9.aspx

and a recommendation from xhtml.com
http://xhtml.com/en/xhtml/reference/xml-declaration/

When XHTML is served as XML, it is good practice to use an XML declaration that identifies the version of XML being used.
0
 
BadotzCommented:
Run yur JavaScript code through JSLint ( http://www.jslint.com/ ).
0
 
JCW2Author Commented:
I've removed my warnings (as I didn't have the method call and method consistent and corrected that) but still need to get the text to alternate.
0
 
Michel PlungjanIT ExpertCommented:
So pls show newest code
0
 
JCW2Author Commented:
Thank you for your help.
0
 
BadotzCommented:
No worries - glad to help.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 3
  • 2
  • +4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now