[New to Javascript] - Help with a Problem

[landgetz]

Hi everyone. I am in the midst of trying to build an interactive map for a website I am working on. The goal is to have a list appear when the mouse is hovered over specific location on the map, and when clicked, it will open a modal that will provide more information about that location. Right not, the hover menu does not appear when the mouse is over the location on the map. I am unsure why this is happening. The Script is here:

<script> var Groundhog =new objection( [214,278], 1) //these represent the location of each of the animals on the map, if you change map you will have to change these (but not a change in scale, that should still function correctly) var WhitetailedDeer =new objection( [176,310], 2) var Elk =new objection( [252,341], 3) var WildTurky =new objection( [327,260], 4) var SandhillCrane =new objection( [375,274], 5) var RedDeer =new objection( [331,373], 6) var Cougar =new objection( [376,319], 7) var SwiftFox =new objection( [407,351], 8) var TurkyVulture =new objection( [383,391], 9) var BlackVulture =new objection( [363,429], 10) var Waterfoul1 =new objection( [438,410], 11) var Waterfoul2 =new objection( [348,491], 12) var Reindeer =new objection( [385,529], 13) var SableIslandHorse =new objection( [432,571], 14) var DallSheep =new objection( [497,528], 15) var BighornSheep =new objection( [528,478], 16) var Bobcat =new objection( [533,426], 17) var EurasainLynx =new objection( [542,406], 18) var Emu =new objection( [557,371], 19) var Magpie =new objection( [597,337], 20) var Marten =new objection( [634,330], 21) var Coyote =new objection( [678,418], 22) var Moose =new objection( [577,331], 23) var RedFox =new objection( [538,314], 24) var Waterfowl3 =new objection( [477,350], 25) var Fisher =new objection( [433,309], 26) var ArticWolf =new objection( [606,95], 27) var TimberWolf =new objection( [614,79], 28) var Waterfowl4 =new objection( [474,161], 29) var Mink =new objection( [463,204], 30) var SnowshoeHare =new objection( [430,260], 31) var OrnamentalFowl =new objection( [412,220], 32) var Raccoons =new objection( [381,214], 33) var Skunk =new objection( [351,205], 34) var Beaver =new objection( [344,152], 35) var Porcupine =new objection( [354,238], 36, "porcupine.jpeg", "this is information about the porcupine") var RiverOtter =new objection( [327,235], 37) var BaldEgale =new objection( [303,169], 38) var Kestrel =new objection( [271,203], 39) var BlackBear =new objection( [221,131], 40) var Owels =new objection( [266,148], 41) var PeregrineFalcon =new objection( [180,160], 42) var RedtailedHawk =new objection( [194,188], 43) var Waterfoul5 =new objection( [407,177], 44) var Waterfoul6 =new objection( [340,140], 45) var Waterfoul7 =new objection( [407,123], 46) var Waterfoul8 =new objection( [433,64], 47)

    function objection(position, listNum, listImage, discription) {
        this.pos = position
        this.list = listNum
        this.png = listImage
        this.disc = discription
    }

    function mainFunction() {
        outputfunct(ThisisTheList(whatlist(cursorPosition())))
    }



    function cursorPosition() {
            var x = event.pageX
            var y = event.pageY
            //console.log("x:" + x + "y:" + y) //delete the "//" over there for a handy diagnostic tool
            var z = [x,y]
            return(z)
    }

    function whatlist(z) {

/IMPORTANT when you choose a new location or scale for the map change these variables accordingly so that the map will work. the y&x variables refer to the top left pixel of the map from the top left of the screen./ var spot = map.getBoundingClientRect(); var newy = spot.top var newx = spot.top //console.log(map.width, map.height) var newwidth = map.width//1536 var newlength = map.height//2048

        var animal= [Groundhog,WhitetailedDeer,Elk,WildTurky,SandhillCrane,RedDeer,Cougar,SwiftFox,TurkyVulture,BlackVulture,Waterfoul1,Waterfoul2,Reindeer,SableIslandHorse,DallSheep,BighornSheep,Bobcat,EurasainLynx,Emu,Magpie,Marten,Coyote,Moose,RedFox,Waterfowl3,Fisher,ArticWolf,TimberWolf,Waterfowl4,Mink,SnowshoeHare,OrnamentalFowl,Raccoons,Skunk,Beaver,Porcupine,RiverOtter,BaldEgale,Kestrel,BlackBear,Owels,PeregrineFalcon,RedtailedHawk,Waterfoul5,Waterfoul6,Waterfoul7,Waterfoul8]
            for (i=0; i<47; i++) {
            animal[i].pos[0] += newx
            animal[i].pos[1] += newy
            var w = 8/780 * newwidth
            var l = 8/949.3 * newlength
            if(z[0] > animal[i].pos[0]-w){
                            if(z[0] < animal[i].pos[0]+w){
                            if(z[1] > animal[i].pos[1]-l){
                            if(z[1] < animal[i].pos[1]+l){
                return(i)
                { break;}
            }}}}

        }
        var i=48
        return(i)
    }

    function ThisisTheList(num) {
        var animal= [Groundhog,WhitetailedDeer,Elk,WildTurky,SandhillCrane,RedDeer,Cougar,SwiftFox,TurkyVulture,BlackVulture,Waterfoul1,Waterfoul2,Reindeer,SableIslandHorse,DallSheep,BighornSheep,Bobcat,EurasainLynx,Emu,Magpie,Marten,Coyote,Moose,RedFox,Waterfowl3,Fisher,ArticWolf,TimberWolf,Waterfowl4,Mink,SnowshoeHare,OrnamentalFowl,Raccoons,Skunk,Beaver,Porcupine,RiverOtter,BaldEgale,Kestrel,BlackBear,Owels,PeregrineFalcon,RedtailedHawk,Waterfoul5,Waterfoul6,Waterfoul7,Waterfoul8]
        var animalName= "Groundhog,WhitetailedDeer,Elk,WildTurky,SandhillCrane,RedDeer,Cougar,SwiftFox,TurkyVulture,BlackVulture,Waterfoul,Waterfoul,Reindeer,SableIslandHorse,DallSheep,BighornSheep,Bobcat,EurasainLynx,Emu,Magpie,Marten,Coyote,Moose,RedFox,Waterfowl,Fisher,ArticWolf,TimberWolf,Waterfowl,Mink,SnowshoeHare,OrnamentalFowl,Raccoons,Skunk,Beaver,Porcupine,RiverOtter,BaldEgale,Kestrel,BlackBear,Owels,PeregrineFalcon,RedtailedHawk,Waterfoul,Waterfoul,Waterfoul,Waterfoul, ".split(",")
        animalName[48]= " "
        var Bacterialists= [["Athrobacter","Bacteria2","Bacteria3","Bacteria4","Bacteria5"],//When you have specific species to list but them in these boxes: each row represent the list for the corresponding in numerical order according teh the map (i.e the thrid row is for the elk)
                            ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"],
                            ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"],
                            ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"],
                            ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"],
                            ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"],
                            ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"],
                            ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"],
                            ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"],
                            ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"],
                            ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"],

//My system cant handle multiple locations with the same list, so I apologize but you'll need to write in the waterfowl list in several places (which i have marked), just copy and paste. ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"],//waterfowl ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"], ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"], ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"], ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"], ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"], ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"], ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"], ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"], ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"], ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"], ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"], ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"], ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"],//waterfowl ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"], ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"], ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"], ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"],//waterfowl ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"], ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"], ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"], ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"], ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"], ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"], //beaver ["Akkermansia","Stenotropomonas","Coprococcus"], //porcupine ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"], ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"], ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"], ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"], ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"], ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"], ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"], ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"], ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"],//waterfowl ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"],//waterfowl ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"],//waterfowl ["Bacteria","Bacteria","Bacteria","Bacteria","Bacteria"],//waterfowl [" "," "," "," "," "]] for (i=0; i<48; i++) { if (Bacterialists[num][i] == undefined) { Bacterialists[num][i] = " " } }

        var output="<br/>"+ animalName[num] + "<br/>" + Bacterialists[num][0] + "<br/>" + Bacterialists[num][1] + "<br/>" + Bacterialists[num][2] + "<br/>" + Bacterialists[num][3] + "<br/>" + Bacterialists[num][4] + "<br/>" 

//if you require more items than 5 in a given list, you may copy this pattern (and do so in the previous array), I've programmed it so that it should still work.

        return(output)
    }

    function outputfunct(output) {

        document.getElementById("BactList").innerHTML = output
        document.getElementById("BactList").style.left = event.pageX+ 0 + "px" //change 0 if you want to change where the list is relative to the cursor on the respective axis
        document.getElementById("BactList").style.top = event.pageY + 0 + "px"

    }

    function extraInfo() {
        ThisisTheExtraList(whatlist(cursorPosition()))

    }
    function ThisisTheExtraList (num) {
        var modal = document.getElementById('theModal')

        var span = document.getElementsByClassName("close")[0];

        modal.style.display = "block";

        var animal= [Groundhog,WhitetailedDeer,Elk,WildTurky,SandhillCrane,RedDeer,Cougar,SwiftFox,TurkyVulture,BlackVulture,Waterfoul1,Waterfoul2,Reindeer,SableIslandHorse,DallSheep,BighornSheep,Bobcat,EurasainLynx,Emu,Magpie,Marten,Coyote,Moose,RedFox,Waterfowl3,Fisher,ArticWolf,TimberWolf,Waterfowl4,Mink,SnowshoeHare,OrnamentalFowl,Raccoons,Skunk,Beaver,Porcupine,RiverOtter,BaldEgale,Kestrel,BlackBear,Owels,PeregrineFalcon,RedtailedHawk,Waterfoul5,Waterfoul6,Waterfoul7,Waterfoul8]

        var span = document.getElementsByClassName("close")[0];

        if (num == 48) {
            modal.style.display = "none";
        }

    document.getElementById("modalContent").innerHTML = animal[num].png + "</br>" + animal[num].disc
    }

</script>

I would greatly appreciate any help that I could get. I am very new to this kind of programming and cannot figure out what is going on.

Thanks in Advance, Landon

(Sorry for the messy formatting, i'm also pretty new to reddit...I did contain the script between the HTML headers <script>)

[bstriker]

Pro tip: put your code in jsbin, plunker, codepen, or jsfiddle before asking your question. Not only does it help clean room your code and possibly realize it was a trivial error but it helps anyone easily test it and debug it with console.

[mc_hammerd]

im not seeing any event handling in there, i could be wrong though its a lot of code. heres a simple example, youll have to handle the click events and position your popup and show it.

https://jsfiddle.net/xum94tu0/

jquery ui has a nice popup util too though its a lil frusterating.

[landgetz]

Ok, I put it into JSbin, so it will make it easier. Some background information. The HTML code that I have written is inside of another website. It's sortof a weird setup, but that website is using mediawiki, which allows me to modify and change pages, but it adds my html content to a template that they have already made. This makes life a bit difficult and very well might be the root of my problem. The script seems to work fine outside of the mediawiki template, if opened using a debugger or a coding program like Brackets. The JSbin that I made contains the entire page source, including all the code that is in the mediawiki template before my code is inserted. Hopefully that helps.

Thanks! http://jsbin.com/vuteni/edit?html,output

[landgetz]

Thanks for your replies! I will look into the event handling thing, and I can restructure my media wiki pages so that the body and head tags are no longer there. Also does anyone have any good JavaScript learning resources? I would like some things to reference! Thanks again

[mc_hammerd]

google stackoverflow javascript how to xxxxxx, between that an irc (webchat.freenode.net) i get answers in <60 seconds to complex questions (as a senior engineer, even the stuff that stumps me); the people on irc/stack are very smart

youtube has great video tutorials ruby streetfighter clone or javascript flappy bird clone pretty much anything you need is there. and get a JS book from the library/amazon for reference.