Question

EDIT I’ve figured out what was wrong. If you want to see if you can find it too, feel free. Otherwise I posted the answer in the answers.

I’ll go ahead and post all of the code since I’ve asked this question before but left out the things I thought were unnecessary to finding the problem, but the answerers wanted all of the code.

The following code is modeled after some other code of mine that works perfectly fine, but in this method it does not want to work. I have an initial div called #container which is an image of an Oklahoma map, and on that image you see different segments of the state. In my old code, when a user clicks in certain area of a segment, it would toggle the #container div off and toggle on a div of an image of a ‘zoomed in’ picture of that segment. After my new code which is supposed to make my code more concise, it will not toggle the #container off (and I suspect not toggle the new div on).

I determine which segment (#region) to turn on by using mouse position when the user clicks. I use pixel coordinates, and I have done the math to scale those coordinates so it doesn’t matter what the screen size is.

And now, here is the new and buggy code:

$(document).ready(function()
{


//Main Oklahoma map
$("#container").click(function(e)
{
    var x = event.pageX;
    var y = event.pageY;

    const scaling_Screen_Max_Pixel_X = 1679;
    const scaling_Screen_Max_Pixel_Y = 924;

    // Math for the scaling of different sized windows
    var currentX = $(document).width();
    var currentY = $(document).height();
    var xScale = currentX/scaling_Screen_Max_Pixel_X;
    var yScale = currentY/scaling_Screen_Max_Pixel_Y;

    // Variables for different regions
    var zoneX = x/xScale;
    var zoneY = y/yScale;

    // Arrays containing the min and max x and y values of the rectangular area around a farm
    var minX = [47, 593, 593, 958, 600, 744, 852, 1025, 1060, 1159, 1366];
    var maxX = [553, 958, 792, 1011, 1124, 1124, 1149, 1598, 1280, 1623, 1551];
    var minY = [250, 250, 473, 349, 526, 665, 495, 248, 471, 520, 481];
    var maxY = [330, 473, 515, 478, 665, 721, 526, 471, 500, 763, 520];

    var regionNumber = [1,2,2,2,3,3,3,4,4,5,5];

    /** Loops through the values within the coordinate arrays to
        determine if the user clicked within a certain area **/
    for (var i = 0; i < minX.length; i++)
    {
        if(zoneX >= minX[i] && zoneX <= maxX[i] && zoneY >= minY[i] && zoneY <= maxY[i]) 
        {
            $("#region"+region[i]).toggle();
            $("#container").toggle(); //toggle off
        }
    }
   }); 
 });

The coordinates in the minX, maxX, etc. arrays are in order, so the first element in each of those four arrays belong to the first region (#region1). The reason I have the regionNumber array is because I have more than one “rectangle” set of coordinates for some regions because the regions are not perfectly rectangular.

As I’ve said before, nothing happens when I click a region. Do you see what the problem is here?

Answer 1

OOPS! While sitting here staring at my code, I realized what the problem was. I forgot to say $("#region"+regionNumber[i]).toggle(); instead of $("#region"+region[i]).toggle();.

Now it works just fine. Thanks for looking everyone!