Solved

Debugging Javascript

Posted on 2011-03-11
15
341 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 39

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
The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

 
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

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Awk To add just one column - modifying script from an answer 2 22
jQuery on Submit 4 42
multiple selects 23 48
Where to download python requests library 6 29
Since upgrading to Office 2013 or higher installing the Smart Indenter addin will fail. This article will explain how to install it so it will work regardless of the Office version installed.
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
With the power of JIRA, there's an unlimited number of ways you can customize it, use it and benefit from it. With that in mind, there's bound to be things that I wasn't able to cover in this course. With this summary we'll look at some places to go…

860 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