?
Solved

Debugging Javascript

Posted on 2011-03-11
15
Medium Priority
?
346 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
  • 2
  • +4
15 Comments
 
LVL 39

Accepted Solution

by:
Aaron Tomosky earned 400 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 400 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
A new era in Cloud training has arrived.

A day that will go down in Cloud history.. But are you ready for it? Will you accept this Cloud challenge?

 
LVL 84

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 84

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 400 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 84

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 400 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 400 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

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

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

In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
This article will show how Aten was able to supply easy management and control for Artear's video walls and wide range display configurations of their newsroom.
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…
Progress
Suggested Courses

752 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