JavaScript onload 点击事件答案

【问题标题】：JavaScript onload Click eventJavaScript onload 点击事件
【发布时间】：2017-07-09 22:46:41
【问题描述】：

我正在使用地理定位 API，并且我正在尝试设置一个 onclick 事件，一旦单击按钮，就会显示用户位置的经度。但是我的 onclick 函数不起作用，因为即使我没有调用它，我的函数似乎也在加载。

<!DOCTYPE html>
<html lang="en">
    <head>
        <link href="style.css">
       <title>
       </title>
        <!--<script src="modernizr.custom.64298.js"></script>-->
    </head>

    <body>
        <button onclick="showLocation()">Click</button>
        <p id="info"></p>
        <script src="script.js"></script>
    </body>
</html>

JavaScript 代码：

navigator.geolocation.getCurrentPosition(showLocation);

function showLocation(position) {
  var currPosLat = position.coords.latitude;
  document.getElementById("info").innerHTML = "latitude: " + currPosLat;
}

我只是不确定我做错了什么。我的纬度只是被加载到我的 innerHTML 中，甚至没有我点击。如果我确实使用点击按钮，它会说坐标是undefined。

【问题讨论】：

标签： javascript

【解决方案1】：

您的代码以navigator.geolocation.getCurrentPosition(showLocation);开头

这会在加载 .js 后立即调用 showLocation 函数，这就是它立即运行的原因。

您需要做的就是将此行移到您的 onclick 上，它就会起作用：

所以你的按钮变成了：

<button onclick="navigator.geolocation.getCurrentPosition(showLocation)">Click</button>

而您的脚本只是 showLocation 函数

function showLocation(position) {
    var currPosLat = position.coords.latitude;
    document.getElementById("info").innerHTML = "latitude: " + currPosLat;
}

【讨论】：

谢谢杰夫，我会在两分钟内接受这条评论。感谢这位帮助伙伴。
感谢 Jeff，新方法似乎更简单了，感谢伙伴。