Solved

Debugging Javascript

Posted on 2011-03-11
15
337 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
Comment Utility
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 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 100 total points
Comment Utility
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
Comment Utility
Just paste the code into the validator and see it validate
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Run yur JavaScript code through JSLint ( http://www.jslint.com/ ).
0
 

Author Comment

by:JCW2
Comment Utility
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
Comment Utility
So pls show newest code
0
 

Author Closing Comment

by:JCW2
Comment Utility
Thank you for your help.
0
 
LVL 29

Expert Comment

by:Badotz
Comment Utility
No worries - glad to help.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Whether you've completed a degree in computer sciences or you're a self-taught programmer, writing your first lines of code in the real world is always a challenge. Here are some of the most common pitfalls for new programmers.
In this post we will learn how to connect and configure Android Device (Smartphone etc.) with Android Studio. After that we will run a simple Hello World Program.
The viewer will learn how to dynamically set the form action using jQuery.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

772 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now