0

I am trying to make a store locator and I am having problems with the drop down menu, I wanted a drop down menu for the distance from the user to the shops so for example 1 mile 3 miles 10 miles and so on but I can't get a drop down menu to run a function that will show these locations I have tried a couple example I have seen on here for example

Calling javascript functions from drop down

But I can't get it to work for my code the code I am trying to run is:

function list() {
  document.getElementById("myList").onchange = function() {
    var sheet=document.getElementById("myList").value;

    if(sheet == "one"){
      showPosition();
    }
    else if(sheet == "two"){
      showPosition2();
    }
    else if(sheet = "three"){
    }
    else{
    }
    return false
  };
}
window.onload = list;

The function that I want it to run when I choose the first option in the menu is: 

function showPosition(position) {
  var locations = [
  ['store1', -2.063150, 52.516503, 4],
  ['store2', -2.064824, 52.518436, 5],
  ['store3', -2.068214, 52.519898, 3],
  ['store4', -2.068558, 52.512769, 2],
  ['store5', -2.070875, 52.510758, 1]
  ];

  var lon1 = position.coords.longitude* 0.0174532925;
  var lat1 = position.coords.latitude * 0.0174532925;
  var i = 0;

  while (i < locations.length)
  {
    x.innerHTML+= "<br>Distance " + calcDist(lon1, lat1, locations[i][1]*0.0174532925, locations[i][2]* 0.0174532925);
    i++;
  }     
}   
function calcDist(lon1, lat1, lon2, lat2)
{
  return Math.acos(Math.sin(lat1)*Math.sin(lat2) + 
    Math.cos(lat1)*Math.cos(lat2) *
    Math.cos(lon2-lon1)) * 3958;    
}

And the menu that I'm using is:

<ul id="dropdown">
<li> Choose theme
<ul> 
    <li id="stylesheet1" > <a href="#"> Default </a></li>
    <li id="stylesheet2" > <a href="#"> Theme 1 </a></li>
    <li id="stylesheet3" > <a href="#"> Theme 2 </a></li>
    <li id="stylesheet4" > <a href="#"> Theme 3 </a></li>

</ul>
</li>
</ul>
Community
  • 1
  • 1
Pazrat
  • 103
  • 1
  • 1
  • 9
  • wheres the dropdown? you have unordered list only. Also you have id=dropdown, and you are searching for myList – bhb Sep 26 '13 at 08:36
  • wrong part of the code sorry it is supposed to be: Select Theme
    – Pazrat Sep 26 '13 at 08:39

1 Answers1

0

By looking at the code, I see one major error.

Change window.onload = list; to window.onload = list();

Demo - shows the passing of params 

var testPosition = {
        coords: {
            longitude: 1,
            latitude: 1
        }
    }

showPosition(testPosition);
bhb
  • 2,476
  • 3
  • 17
  • 32
  • what do you mean by parameter ?? – Pazrat Sep 26 '13 at 08:46
  • `showPosition(position)` , `position` is required, in your code you are doing only `showPosition()` – bhb Sep 26 '13 at 08:49
  • i tryed that before and i get the same results if you look at http://thor/index.php i think you may be able to see what im working on because i have a button that does the function at the moment and it works but my specification is a drop down menu – Pazrat Sep 26 '13 at 08:53
  • yee i have tryed the fiddle link but i cant quiet get my head round how it works, and my example would show you when you press the button it gives you distances for 4 stores based on my location all i wanted to do was take the function from the button and use it as the first option on the drop down menu – Pazrat Sep 26 '13 at 09:06
  • ok i have a better understanding of how this works but now i would like to link this to my original positions so instead of the var test position that you created i would like to show the 5 that i have created in the var locations – Pazrat Sep 26 '13 at 09:21
  • where are you gettin the original positions from?? – bhb Sep 26 '13 at 09:24
  • it is the var locations where the longitude and latitude are written down in the function showpositions(positions) var lon1 = position.coords.longitude* 0.0174532925; var lat1 = position.coords.latitude * 0.0174532925; these two variables are the users coordinates that are provided by geolocation – Pazrat Sep 26 '13 at 09:27
  • im just guessing here try `navigator.geolocation.getCurrentPosition(showPosition);` – bhb Sep 26 '13 at 09:31
  • i have already got that in my code thats part of the function that finds the users location. all i was trying to do was display the results by using the drop down menu instead of the button that im currently using – Pazrat Sep 26 '13 at 09:39