object HTMLSpanElementからの取り出し方

Question

前提

現在地から目的地まで、GoogleMapのAPIを使用して経路を検索するサイトを作っています。

実現したいこと

JavaScriptで取得した現在地情報をPythonに送りたいです。

発生している問題・エラーメッセージ

送った内容が「object HTMLSpanElement」になってしまいます。

該当のソースコード

<div class="center">
    <div class="btn-margin mb-3">
        <button id="btn" class="btn">
            現在位置を取得する
        </button>
    </div>
    <div class="txt-margin">
        <p>緯度：<span id="latitude">???</span><span>度</span></p>
        <p>経度：<span id="longitude">???</span><span>度</span></p>
    </div>
</div>
<script src="/static/js/geo.js"></script>

// ボタンを押した時の処理
document.getElementById("btn").onclick = function(){
    // 位置情報を取得する
    navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
    send (latitude, longitude);
};

// 取得に成功した場合の処理
function successCallback(position){
    // 緯度を取得し画面に表示
    var latitude = position.coords.latitude;
    document.getElementById("latitude").innerHTML = latitude;
    // 経度を取得し画面に表示
    var longitude = position.coords.longitude;
    document.getElementById("longitude").innerHTML = longitude;
};

// 取得に失敗した場合の処理
function errorCallback(error){
    alert("位置情報が取得できませんでした");
};

// APIに緯度と経度を送る
function send (latitude, longitude){
  // FormDataオブジェクトの初期化
  const fd = new FormData();

  // FormDataオブジェクトにデータをセット
  fd.append('lat', latitude);
  fd.append('long', longitude);

  $.ajax({
    url: '/gps',
    type: 'POST',
    data: fd ,
    contentType: false,
    processData: false,
    success: function(data, dataType) {
        //非同期で通信成功時に読み出される [200 OK 時]
        console.log('Success', data);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        //非同期で通信失敗時に読み出される
        console.log('Error : ' + errorThrown);
    }
});
}

@app.route("/gps", methods=["GET","POST"])
def gps():
    if request.method == "POST":
        lat = request.form['lat']
        long = request.form['long']
        print("緯度",lat)
        print("経度",long)
        return render_template("gps.html")
    else:
        return render_template("gps.html")

試したこと

successCallbackの最後でconsole.log(latitude)、console.log(longitude)を試してみましたが表示されませんでした。

補足情報（FW/ツールのバージョンなど）

画面に表示はされるので緯度と経度の取得はできているはずです。
Pythonのprintはデバッグが終わったら削除します。
以下のサイトを参考にしました。

Comments

[m.ts10806]

＞successCallbackの最後でconsole.log(latitude)、console.log(longitude)を試してみましたが表示されませんでした。

どこを見て「表示されない」と言っていますか？

[JulyLuv]

どこを見て「表示されない」と言っていますか？

[退会済みユーザー]

ターミナルです。

[m.ts10806]

ターミナル？
JavaScriptのconsole.log()はブラウザの開発ツールのコンソールに出力する機能です。

あとJulyLuvというユーザは明らかに荒らしなので無視を。

Answer 1

latitudeもlongitudeもsuccessCallback()のローカル変数なのが気になりますが・・・・

HTMLSpanElementからの取り出し方

Document.getElementById()からtextContentを参照。

ただ、successCallback()でそれぞれの値が正しくとれているなら、からそのままsend()呼んだ方が確実では？
今のままだとエラー時もsend()呼んでるような気がします。

document.getElementById("btn").onclick = function(){
    // 位置情報を取得する
    navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
   // send (latitude, longitude); //←削除
};

function successCallback(position){
    // 緯度を取得し画面に表示
    var latitude = position.coords.latitude;
    document.getElementById("latitude").innerHTML = latitude;
    // 経度を取得し画面に表示
    var longitude = position.coords.longitude;
    document.getElementById("longitude").innerHTML = longitude;

   send (latitude, longitude); //←追加
};

Comments

[退会済みユーザー]

できました！うっかりしていました。ありがとうございます。

[m.ts10806]

おそらくデバッグのやり方を勘違いしているところからだと思うので、
そのあたり確実にしていくと良いかもしれません。