javascript geolocationによる位置情報の取り扱い

Question

javascriptで取得した位置情報を、HTMLの<data>のvalueに設定し、<data>のvalueを取り出して、変数latitudeに格納したいのですが、うまくいきません。

<script>
var data_latitude =document.getElementById('latitude');

navigator.geolocation.getCurrentPosition(function(position){
    data_latitude.value = position.coords.latitude;
});

var latitude = data_latitude.value;
</script>

<data id="latitude"></data>

var latitude = data_latitude.value;
では、data_latitude.valueに値がなく、変数latitudeにdata_latitudeに設定したvalue値を格納できません。

chromeのデベロッパーツールのElementで確認すると、
<data id="latitude" value="35.*********"></data>
と、latitudeが設定できていることが確認できます。

<data id="latitude"></data>の部分を、<input id="latitude">に変更してみると、input欄には取得したlatitudeの値が表示されますが、取り出すことができません。

<data>（もしくは<input>）には、取得したlatitudeの値をvalueで設定できているのに、取り出せず立ち止まってしまいました。

何かヒントがあればご教授いただけますと幸いです。
よろしくお願いします。

Comments

[Lhankor_Mhy]

『うまくいきません』とは具体的には何が起きましたか？
「こうなると思って」「このコードを書いたが」「このような結果になった」のようにご提示ください。
https://teratail.com/help/question-tips#questionTips3-4-1

[old_dog]

失礼しました。慣れてなくて、作成途中で投稿してしまったようです。申し訳ありませんでした。

Answer 1

navigator.geolocation.getCurrentPositionは非同期の動作ですので、その次の行にあるvar latitude = data_latitude.value;は、位置情報が取得できる前に実行されます。

位置情報を必要とする動作は、いちばん単純にはgetCurrentPositionが取るコールバック関数の中に書く必要があります。

Comments

[old_dog]

ありがとうございます。質問を作成途中で誤送信してしまい申し訳ありませんでした。質問内容を整理して再投稿しましたので、ご指導よろしくお願いします。投稿しなおしたコードでは、第一引数に無名関数を利用しましたが、質問に記載の通り、設定したvalue値を再取得できない状況です。

[maisumakun]

すでに回答したとおりで、「var latitude = data_latitude.value」は位置情報の取得前に実行されます。

[old_dog]

ありがとうございます。しっかり理解できました。
<form>送信などでは位置情報が送れることを確認しました。
<form>の他の方法で、位置情報取得後にタグのvalueに値を設定できる方法を考えてみます。
ほんとにありがとうございました。

Answer 2

時間がないので、コードは書けませんでしたが、promiseを使って非同期処理をすればいいようです。皆様ありがとうございました。