运行函数不起作用的下拉菜单

Drop down menu that runs functions not working

本文关键字：下拉菜单 不起作用 函数 运行      更新时间：2023-09-26

我正在尝试制作商店定位器，但下拉菜单有问题，我想要一个下拉菜单，用于从用户到商店的距离，例如 1 英里 3 英里 10 英里等等，但我无法获得下拉菜单来运行显示这些位置的功能，例如我在这里尝试了几个例子

从下拉列表中调用 JavaScript 函数

但是我无法让它适用于我的代码，我尝试运行的代码是：

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;

当我选择菜单中的第一个选项时，我希望它运行的函数是： 

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;    
}

我正在使用的菜单是：

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

通过查看代码，我看到了一个主要错误。

将window.onload = list;更改为window.onload = list();

演示 - 显示参数的传递 

var testPosition = {
        coords: {
            longitude: 1,
            latitude: 1
        }
    }
showPosition(testPosition);
相关文章：