I wrote a code in jquery. I was not running initially, then i checked online jslint for syntax errors. I caught some errors. Now still the code was not working as expected. So i went for firebug. I haven't done a lot of debugging. I am new to it. Here is my code
var j = 2;
var friends = [];
var distance =[];
$(document).ready(function () {
$('#button').click(function () {
if (j < 11) {
$('#friends').append('Friend' + j + ':<input type="text" id="friend' + j + '"/><br/><br/>');
j++;
}
else {
alert("Limit reached");
}
});
$('button').click(function(){
console.log("button clicked");
var a =[];
for(i=1;i<=j;i++)
{
a[i] = $("#friend" + i).val();
}
var gurl = "http://maps.googleapis.com/maps/api/distancematrix/json?"+
"origins=" +
a.join('|').replace(/ /g,'+') +
"&destinations=" +
a.join('|').replace(/ /g,'+') +
"&sensor=false";
jQuery.ajax(
{
type: "GET",
url: gurl,
dataType: 'jsonp'
}).done(function (response)
{
var rows = response.rows;
alert("hello there");
for (var i = 0; i < rows.length; i++)
{
for(var j=0;j<elements.length;j++)
{
distance[i][j] = rows[i].elements[j].distance;
}
}
alert(distance[1][3]);
});
});
});
Now, what it should do is Go to this link and get the data from json file and store it inside the 2 dimensional array distance[][]. Finally after storing all the data, it should display the result of "distance[1][2]" as an alert.
Now i dont know whats wrong in this code and how to find the logical errors using firebug. What should make my work easy ?
ps: heres the HTML file
<!doctype html>
<html>
<head>
<title>TakeMeHome</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.0.custom.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.0.custom.min.js"></script>
</head>
<body>
<center>
<form id="locations">
Your Place:<input id="source" type="text"><br/>
<br/>
<div id="friends">
Friend1:<input id="friend1" type="text"><br/>
<br/>
</div>
<div id="button">
Add!</div>
<br/>
<br/>
<button>GO!</button>
<br/><br/>
<div id="map" style = "width: 500px; height: 500px"><br/>
</form>
</center>
</body>
</html>
-
Could you please add it to a jsfiddle and share the link ?Riju Mahna– Riju Mahna2013年01月26日 15:02:14 +00:00Commented Jan 26, 2013 at 15:02
-
You might want to look at this question.Pointy– Pointy2013年01月26日 15:03:59 +00:00Commented Jan 26, 2013 at 15:03
-
2For debugging purpose you should use console.log() instead of alerts. This a best practice, plus this is nicer since you can log any object.Alexandre de Champeaux– Alexandre de Champeaux2013年01月26日 15:04:07 +00:00Commented Jan 26, 2013 at 15:04
-
Another best practice would be not to use <br/> to add some spaces in your document but to use CSS instead.Alexandre de Champeaux– Alexandre de Champeaux2013年01月26日 15:14:29 +00:00Commented Jan 26, 2013 at 15:14
-
jsfiddle.net/w3Gxf Heres is the jsfiddle link. Please helpuser1263375– user12633752013年01月26日 16:05:16 +00:00Commented Jan 26, 2013 at 16:05
2 Answers 2
Hey here is a working fiddle with your code, and some examples of ways to debug your js :
As you see you can do nice stuff like :
console.log("distance : ");
console.log(distance);
Hope it helps
They were a few mistakes as well, couldn't help fixing them
8 Comments
The easiest way to debug is to use firebug and console.log() variables or messages at certain points in your script, so that you can better understand what is going on at various steps of your script. You can see the output in the Console tab of firebug.
You can also add breakpoints and watches from some of the other tabs. For example in the DOM tab you can rightclick on a variable and add a watch, or from the Script tab you can click on a position in your script to set a breakpoint or watch, and it will stop the script at that point and/or show a dump of vars at that point.