onClick 返回函数和 GeoLocation答案

【问题标题】：onClick return function and GeoLocationonClick 返回函数和 GeoLocation
【发布时间】：2020-05-08 11:00:39
【问题描述】：

我正在创建一个用于将文件上传到服务器的网页。在上传文件之前，我的网页会收集用户的地理位置。但函数“return GetLocation()”不起作用。我的代码绕过了获取 GeoLocation 的 JavaScript 代码。这是我的代码：

JavaScript：

    var x = document.getElementById("LocationStatus");

    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        } else { 
            x.innerHTML = "Browser not supported!";
            return false;
        }
    }
    function showPosition(position) {
        x.innerHTML = "Latitude: " + position.coords.latitude + 
        "<br>Longitude: " + position.coords.longitude;
        document.cookie="lat="+position.coords.latitude+"lon="+position.coords.longitude;
        return true;
    }
    function error(msg) {
      var s = document.querySelector('#status');
      msg = msg.message ? msg.message : msg; 
      s.innerHTML = typeof msg == 'string' ? msg : "failed";
      s.className = 'fail';
      return false;
    }
</script>

HTML：

<form name="form" method="post" action="upload.php" enctype="multipart/form-data" >
    <input type="file" name="my_file" />
    <button type="submit" onclick="return getLocation()">Upload File</button>
</form>

【问题讨论】：

标签： javascript html geolocation

【解决方案1】：

您永远不会通过在语句中提及return 来调用函数。

将您的代码更改为

<button type="submit" onclick="callFunction();">Upload File</button>

现在你的getLocation()函数将被调用。

在您的代码中，您只是调用了主函数，但其中的函数并没有被调用

也试着给他们打电话

<script>
function callFunction(){
getLocation();
showPosition(position);
error(msg);
}
 var x = document.getElementById("LocationStatus");

    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        } else { 
            x.innerHTML = "Browser not supported!";

        }
         return false;
    }
    function showPosition(position) {
        x.innerHTML = "Latitude: " + position.coords.latitude + 
        "<br>Longitude: " + position.coords.longitude;
        document.cookie="lat="+position.coords.latitude+"lon="+position.coords.longitude;
        return false;
    }
    function error(msg) {
      var s = document.querySelector('#status');
      msg = msg.message ? msg.message : msg; 
      s.innerHTML = typeof msg == 'string' ? msg : "failed";
      s.className = 'fail';
      return true;
    }
</script>

【讨论】：

同样的问题。在没有获取用户位置的情况下，表单移动到 upload.php。
查看我编辑的代码，这是一个正确的语法，但您可能会在代码中遇到position 和msg 的参数问题。
它仍在移动到upload.php，无需请求位置许可。
好吧，我把所有的事情都整理好了，先看看这里返回是必要的，因为你已经给button[type = submit] 提供了一个onclick 事件，否则就不需要它了，我的错误对此感到抱歉。其次，您应该在此 button[type = submit] 调用的函数中设置 return true。现在查看我编辑的答案。
没有用。无需询问位置即可保存文件。

【解决方案2】：

使用 onsubmit="getLocation()" 代替 onclick 并在表单元素上使用它

<form  method="POST" onsubmit="getLocation()" action="upload.php" 
 enctype="multipart/form-data" >
<input type="file" name="my_file" />
<button type="submit">Upload File</button>
</form>

 function getLocation() {

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
        x.innerHTML = "Browser not supported!";
        return false;
    }
}

【讨论】：