PDA

View Full Version : if ( && ) problem



xelawho
01-22-2011, 04:29 AM
Hi,

so I thought I could mash two bits of code together like this:


<div><label for="or">From:</label>
<select name="or" style="width:200px; float: right" id="or" onchange="populate(this)">
<option value="Choose">Select your starting point</option>
<option value="Guatemala">Guatemala City</option>
<option value="Xela">Quetzaltenango</option>
<option value="Antigua">Antigua</option>
<option value="Rio Dulce">Rio Dulce</option>
<option value="Coban">Coban</option>
</select></div>
<div>
<label for="de">To:</label>
<select name="de" style="width:200px; float: right" id="de"></select>
</div>
<div>
<br>
<input type="button" onclick="searchLocations()" value="Show route" />
</div>
</div>
</div>
</div>



<script type="text/javascript">
if (GBrowserIsCompatible()) {
var gpolylines = [];

function populate(o) {
d=document.getElementById('de');
if(!d){return;}
var mitems=new Array();
mitems['Choose']=[''];
mitems['Guatemala']=['Select Destination','Antigua','El Rancho junction','San Pedro La Laguna','Panajachel','Coban','Rio Hondo','Chiquimula','Esquipulas','Copan Ruinas (Honduras)','La Ruidosa junction','Rio Dulce','Flores (via Rio Dulce)','Puerto Barrios','Flores (via Coban)','Quetzaltenango'];
mitems['Xela']=['Select Destination','Guatemala City','Antigua','Chichicastenango','Huehuetenango','Panajachel','San Pedro La Laguna'];
mitems['Antigua']=['Select Destination','Guatemala City','Quetzaltenango','Escuintla','Monterrico','San Pedro la Laguna','Panajachel','Chichicastenango'];
mitems['Rio Dulce']=['Select Destination','Guatemala City','Flores','Lanquin','Coban','Puerto Barrios'];
mitems['Coban']=['Select Destination','Lanquin','Rio Dulce','Laguna Lachua NP','Flores'];
d.options.length=0;
cur=mitems[o.options[o.selectedIndex].value];
if(!cur){return;}
d.options.length=cur.length;
for(var i=0;i<cur.length;i++) {
d.options[i].text=cur[i];
d.options[i].value=cur[i];
}
}


function searchLocations()
{
var found = false;
var from = document.getElementById('or').value;
var to = document.getElementById('de').value;
for (var a = 0; a < gpolylines.length; a++)
{
if (gpolylines[a].myname.toLowerCase() == to.toLowerCase() && gpolylines[a].mycategory.toLowerCase() == from.toLowerCase())
{
found = true;
gpolylines[a].show();
}
}
if ( ! found ) alert("No matches found. Please check your spelling or refine your search.");
}


the first bit, which populates the select boxes works fine, as you can see here (http://www.xelawho.com/map/drive3.htm)

but the second bit (the searchLocations function) is giving me a bit more trouble. What it's supposed to be doing is saying that if there's a polyline whose category xml attribute matches the text from the 1st select box AND whose name attribute matches the 2nd select box, it should be shown.

The methods have worked in the past, there are no errors reported - the only problem is I get the alert regardless of which option I am selecting.

I suspect that the problem is in the if (gpolylines[a].myname.toLowerCase() == to.toLowerCase() && gpolylines[a].mycategory.toLowerCase() == from.toLowerCase()) line, as it's the only one that I really came up with on my own... or can I not get the "or" and "de" elements in that way? Or is it something else entirely?

thanks in advance for any suggestions...

venegal
01-22-2011, 04:37 AM
gpolylines is empty. It's defined as an empty array literal, and there's nothing in your code that populates it.

xelawho
01-22-2011, 04:51 AM
ah. that's embarrassing. :o

even worse is that I have no idea how to fix it. Assuming that it wasn't empty here (http://www.xelawho.com/map/), would you be able to point out to me which is the bit that populates it?

venegal
01-22-2011, 05:19 AM
Have you changed something since the last post? I could have sworn that gpolylines was empty when I typed it into the console.

Anyway, now there's stuff in it, but there are two problems with your comparing routine.

1.) gpolylines[a].myname equals gpolylines[a].mycategory for all a. You're comparing the first one to 'from', though, and the second one to 'to', which are obviously different from each other.

2.) You're comparing those to the "value" attributes of the options, which are different from what you see in the dropdowns. E.g. the text of a dropdown option is 'Quetzaltenango', while its value is 'Xela'.

Please use the console and debugging capabilities of your browser to check that out for yourself, so you'll know how to fix it.

xelawho
01-22-2011, 05:42 AM
:thumbsup: thanks once again for your help and patience, venegal. It's working beautifully now.

I do use the debugging console (but obviously not the right way - I wasn't getting any errors), but I would love to be able to see this stuff without having to get it pointed out to me. I know it's far beyond the scope of the forum, but I'm very curious how you knew that that array was empty, how you could see that myname and mycategory were reading the same attribute, etc. I've just been right clicking on the page in firefox, inspecting element and ctrl-F5ing... am I missing some deeper layer of debugging?

venegal
01-22-2011, 06:26 AM
That's a valuable question you're asking here.

I'm probably not telling you anything completely new here, but it might help:

Debugging is not just about getting and fixing errors that trip up the interpreter, but about getting inside your code and see what it does and what the state of your application is like at any time.

If you're using Firebug (and I don't really know how in Firefox it would be without, since I've never not used it — I can tell you though that e.g. Chrome has those features built in), you can set breakpoints (either in the debugger itself, or in your code by writing debugger;). Code execution will halt there, and you can manipulate the application or get information any way you like; you can, for example, use the console to type in code, which will be executed in the scope, where code execution halted. Type in a variable, and you'll see its value.

In your case, I didn't have to use breakpoints, because gpolylines was a global variable, so I could just let the script run its course, and then use the console in the global scope.

If the variable you're typing in points to an object, you'll actually get a tree with all its properties and methods, which makes it pretty easy to see what's going on.


And, actually, this is not at all beyond the scope of the forum. I wish more people would want to learn how to do stuff themselves.

xelawho
01-22-2011, 06:31 AM
thanks for taking the time to explain that. There are definitely some familiar concepts in what you're talking about, but I've never debugged the way you describe.

I hope to repay your consideration by reducing the amount of silly questions in the future!