Home/ Questions/Q 9199437
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T22:32:16+00:00

I wrote a code in jquery. I was not running initially, then i checked

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Hey here is a working fiddle with your code, and some examples of ways to debug your js :

    http://jsfiddle.net/QxP7p/3/

    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

    • 0