Can'；t访问函数外部的变量值[JavaScript]_Javascript_Html_Function_Variables_Exif Js

Can'；t访问函数外部的变量值[JavaScript]

javascript html function variables

Can'；t访问函数外部的变量值[JavaScript],javascript,html,function,variables,exif-js,Javascript,Html,Function,Variables,Exif Js,我的javascript代码有问题它基本上由一个脚本组成，该脚本访问照片的exif，然后在HTML页面上显示它，更具体地说是它的纬度和经度这个想法是在谷歌地图iframe上同时使用纬度和经度来显示照片拍摄的位置。但那是以后的事了，因为这只是一个测试页面，我用它来测试它的工作问题是，在使用纬度和经度之前，必须将其转换为同一iframe可识别的格式：例如：“latitude=EXIF.getTag（this，“GPSLatitude”）”的输出将是： 41,23.0692,0 它必须是这样的

我的javascript代码有问题

它基本上由一个脚本组成，该脚本访问照片的exif，然后在HTML页面上显示它，更具体地说是它的纬度和经度

这个想法是在谷歌地图iframe上同时使用纬度和经度来显示照片拍摄的位置。但那是以后的事了，因为这只是一个测试页面，我用它来测试它的工作

问题是，在使用纬度和经度之前，必须将其转换为同一iframe可识别的格式：

例如：“latitude=EXIF.getTag（this，“GPSLatitude”）”的输出将是：

41,23.0692,0

它必须是这样的：

var toDecimal = function (number) {
  var d = Math.floor(number[0]);
  var m = Math.floor(number[1]);
  var s = ((number[1]%1)*60);

  var dms = d+(m/60)+(s/3600);

  return dms

};

var latitude_teste="41,23.0692,0";
var latitude_array = latitude_teste.split(',');
var latitude_final = toDecimal(latitude_array);
var local_lat_final = document.getElementById("local_lat_final");
local_lat_final.innerHTML = `${latitude_final}`;

41.384486666667

我有一个函数就是这样做的，如果我这样做，它就会工作：

var toDecimal = function (number) {
  var d = Math.floor(number[0]);
  var m = Math.floor(number[1]);
  var s = ((number[1]%1)*60);

  var dms = d+(m/60)+(s/3600);

  return dms

};

var latitude_teste="41,23.0692,0";
var latitude_array = latitude_teste.split(',');
var latitude_final = toDecimal(latitude_array);
var local_lat_final = document.getElementById("local_lat_final");
local_lat_final.innerHTML = `${latitude_final}`;

但是如果我尝试像这样使用上面的方法（latitude是函数getExif（）中的变量）：

它不会显示纬度的任何值

为什么我会有这个问题？是语法错误吗

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EXIF</title>
    <style>
        img{
            width: 500px;
            max-height: auto;
        }   
    </style>    
</head>

<body>

    <img src="https://c1.staticflickr.com/5/4867/30883801817_bf122bc498_o.jpg" id="img1" />


    <h1>Latitude Exif</h1>
    <p id="local_lat"></p>

    <h1>Longitude Exif</h1>
    <p id="local_lon"></p>

    <h1>Latitude Final</h1>
    <p id="local_lat_final"></p>

    <h1>Longitude Final</h1>
    <p id="local_lon_final"></p>

    <script src="exif.js"></script>

    <script>

        window.onload=getExif;


        function getExif() {
            var img1 = document.getElementById("img1");
            EXIF.getData(img1, function() {

            latitude = EXIF.getTag(this, "GPSLatitude");
            var longitude = EXIF.getTag(this, "GPSLongitude");  

            var local_lat = document.getElementById("local_lat");
            var local_lon = document.getElementById("local_lon");

            local_lat.innerHTML = `${latitude}`;
            local_lon.innerHTML = `${longitude}`;
            });


        }

        /*função para converter latitude e longitude do exif.js 
        em graus decimais, legíveis pelo google maps*/

        var toDecimal = function (number) {


            var d = Math.floor(number[0]);
            var m = Math.floor(number[1]);
            var s = ((number[1]%1)*60);

            var dms= d+(m/60)+(s/3600);

            return dms

        };

        var latitude_teste="41,23.0692,0";
        var latitude_array = latitude_teste.split(',');
        var latitude_final = toDecimal(latitude_array);
        var local_lat_final = document.getElementById("local_lat_final");
        local_lat_final.innerHTML = `${latitude_final}`;

        /*THIS PIECE OF CODE BELOW WON'T WORK if used to replace the one above*/


        /*
        var latitude_teste=latitude;
        var latitude_array = latitude_teste.split(',');
        var latitude_final = toDecimal(latitude_array);
        var local_lat_final = document.getElementById("local_lat_final");
        local_lat_final.innerHTML = `${latitude_final}`;

        */

        var longitude_teste="2,6.4013,0";
        var longitude_array = longitude_teste.split(',');
        var longitude_final = toDecimal(longitude_array);
        var local_lon_final = document.getElementById("local_lon_final");
        local_lon_final.innerHTML = `${longitude_final}`;


    </script>

</body>
</html>


进出口银行
img{
宽度：500px；
最大高度：自动；
}   
纬度Exif

经度Exif

纬度决赛

经度决赛

window.onload=getExif；
函数getExif（）{
var img1=document.getElementById（“img1”）；
getData（img1，函数（）{
纬度=EXIF.getTag（这是“GPSLatitude”）；
var longitude=EXIF.getTag（这是“GPSLongitude”）；
var local_lat=document.getElementById（“local_lat”）；
var local_lon=document.getElementById（“local_lon”）；
local_lat.innerHTML=`${latitude}`；
local_lon.innerHTML=`${longitude}`；
});
}
/*função para转换器纬度e经度do exif.js
谷歌地图*/
var toDecimal=函数（编号）{
var d=数学楼层（数字[0]）；
var m=数学楼层（编号[1]）；
var s=（（数字[1]%1）*60）；
var-dms=d+（m/60）+（s/3600）；
返回dms
};
var latitude_teste=“41,23.0692,0”；
var latitude_数组=纬度_测试分割（'，'）；
var latitude\u final=toDecimal（纬度数组）；
var local_lat_final=document.getElementById（“local_lat_final”）；
local_lat_final.innerHTML=`${latitude_final}`；
/*如果用下面的代码替换上面的代码，那么下面的代码将不起作用*/
/*
var latitude_teste=纬度；
var latitude_数组=纬度_测试分割（'，'）；
var latitude\u final=toDecimal（纬度数组）；
var local_lat_final=document.getElementById（“local_lat_final”）；
local_lat_final.innerHTML=`${latitude_final}`；
*/
变量经度_teste=“2,6.4013,0”；
变量经度数组=经度测试分割（'，'）；
var longitude\u final=toDecimal（经度数组）；
var local_lon_final=document.getElementById（“local_lon_final”）；
local_lon_final.innerHTML=`${longitude_final}`；

您从

EXIF.getTag（）

获得的

纬度

已经是一个数组。这只是因为您将其输出为字符串，所以可以看到逗号分隔的字符串，但它实际上是一个数组

因此，在您的代码中，您不应该执行

split（）

：

相反，只要做：

var latitude_final = toDecimal(latitude);

附录：您应该将此代码放在回调中，您必须

EXIF.getTag（）

。您试图访问其外部的

纬度

和

经度

，这是重复/关闭的原因。

我尝试了此操作，但仍无法在页面上显示任何值。。。奇怪的另外，如果我使用“typeof”作为纬度，它确实会说它是一个字符串。@trincot您的观察在技术上是正确的（没有此修复程序代码将无法工作），但这也不是根本原因-第一个问题是此代码应该在

EXIF.getData

的回调中。@brunodesthuilliers，据我所见，OP在问题末尾发布的代码中，代码正确地放入了回调中，尽管他的代码没有正确缩进。@trincot此代码是我作为要点发布的固定版本，而不是原始的非工作代码；-）哦，我明白了，OP已经逐步更新了他们的问题，现在甚至包括了这个修正。我的，我的，这令人困惑：-）问题很可能是时间。什么时候纬度变得可用…？假定在窗口上。onload=getExif；确切地说，

getExif

将在稍后的某个时候执行（在窗口加载时），但是您的代码希望变量立即出现。此外，甚至

EXIF.getData

也可能是异步执行的。那么我该怎么办？（我想这会增加一些必要的阅读）。有没有一种方法可以实现某种延迟，使代码只在变量可用后才期望变量？@deceze虽然您的诊断是正确的（计时问题），但我不会将其作为14220321的dup关闭-这里的解决方案非常简单，就是将顶级代码（非工作部分）移动到因此它在正确的时间执行，无需使用async/await等，我们已经有了“回调”（getExif，顾名思义）。

var latitude_final = toDecimal(latitude);