Solved

Debugging Javascript

Posted on 2011-03-11
15
340 Views
Last Modified: 2012-05-11
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
Comment
Question by:JCW2
  • 5
  • 3
  • 2
  • +4
15 Comments
 
LVL 38

Accepted Solution

by:
Aaron Tomosky earned 100 total points
ID: 35114421
Use firefox. Install firebug. It let's you do breakpoints and check variables just like a real debugger
0
 
LVL 16

Assisted Solution

by:sjklein42
sjklein42 earned 100 total points
ID: 35114434
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
 
LVL 10

Expert Comment

by:aboo_s
ID: 35114440
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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 35114489
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35114837
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
 
LVL 83

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 100 total points
ID: 35114917
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35114942
Just paste the code into the validator and see it validate
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 35114989
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35115018
I read the page. It is 5 years old. The world has moved on and so has ie7 and ie8 and ie9
0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 100 total points
ID: 35115032
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
 
LVL 29

Assisted Solution

by:Badotz
Badotz earned 100 total points
ID: 35116010
Run yur JavaScript code through JSLint ( http://www.jslint.com/ ).
0
 

Author Comment

by:JCW2
ID: 35116937
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35117008
So pls show newest code
0
 

Author Closing Comment

by:JCW2
ID: 35117017
Thank you for your help.
0
 
LVL 29

Expert Comment

by:Badotz
ID: 35117129
No worries - glad to help.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is about my first experience with programming Arduino.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

778 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question