JavaScriptで入力フォームに値をセットしたいです

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 88

t.togashi

score 14

前提・実現したいこと

Ruby on Railsにて、Geolocation APIを使用して取得した緯度・経度情報を、入力フォームにセットできるように試みています。

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

viewに設置したボタンを押すと、緯度・経度情報を入力フォームにセットするJavaScriptが作動するようにしたつもりなのですが、ボタンを押しても、エラーメッセージは生じないのですが、何も反応がありません。
お手数ですが、どこに問題があるのかご教示いただきたいです。

views/damages/new.html.slim

= form_with model: @damage, local: true do |f|
  .form-group
  = f.label :title, '題名'
  = f.text_field :title, class: 'form-control'
  .form-group
  = f.label :place, '場所'
  = f.text_field :place, class: 'form-control'
  .form-group
  = f.label :latitude, '緯度'
  = f.text_field :latitude, class: 'form-control', id: 'latitude'
  .form-group
  = f.label :longitude, '経度'
  = f.text_field :longitude, class: 'form-control', id: 'longitude'

  button onclick="geoFindMe()" type="button"  緯度・経度情報を取得

  .form-group
  = f.label :description, '内容'
  = f.text_area :description, rows: 10, class: 'form-control'
  .form-group
  = f.label :amount, '被害額(円)'
  = f.text_field :amount, class: 'form-control'
  .form-group
  = f.label :image, '写真'
  = f.file_field :image, class: 'form-control'
  = f.submit class: 'btn btn-primary mt-3'

assets/javascripts/application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
//= require bootstrap-sprockets
//= require underscore
//= require gmaps/google


function geoFindMe() {
    // ユーザーの端末がGeoLocation APIに対応しているかの判定
    // 対応している場合
    if( navigator.geolocation )
    {
        // 現在地を取得
        navigator.geolocation.getCurrentPosition(

            // [第1引数] 取得に成功した場合の関数
            function( position )
            {
                取得したデータの整理
                var data = position.coords ;

                // データの整理
                var lat = data.latitude ;
                var lng = data.longitude ;

                // // HTMLへの書き出し
                // document.getElementById( 'result' ).innerHTML = '<dl><dt>緯度</dt><dd>' + lat + '</dd><dt>経度</dt><dd>' + lng + '</dd></dl>' ;

                // views/damages/new.html.slimの緯度・経度欄へ入力
                document.getElementById( "latitude" ).value = lat ;
                document.getElementById( "longitude" ).value = lng ;
            },

            // [第2引数] 取得に失敗した場合の関数
            function( error )
            {
                // エラーコード(error.code)の番号
                // 0:UNKNOWN_ERROR                原因不明のエラー
                // 1:PERMISSION_DENIED            利用者が位置情報の取得を許可しなかった
                // 2:POSITION_UNAVAILABLE        電波状況などで位置情報が取得できなかった
                // 3:TIMEOUT                    位置情報の取得に時間がかかり過ぎた…

                // エラー番号に対応したメッセージ
                var errorInfo = [
                    "原因不明のエラーが発生しました…。" ,
                    "位置情報の取得が許可されませんでした…。" ,
                    "電波状況などで位置情報が取得できませんでした…。" ,
                    "位置情報の取得に時間がかかり過ぎてタイムアウトしました…。"
                ] ;

                // エラー番号
                var errorNo = error.code ;

                // エラーメッセージ
                var errorMessage = "[エラー番号: " + errorNo + "]\n" + errorInfo[ errorNo ] ;

                // アラート表示
                alert( errorMessage ) ;

                // HTMLに書き出し
                document.getElementById("result").innerHTML = errorMessage;
            } ,

            // [第3引数] オプション
            {
                "enableHighAccuracy": false
            }

        ) ;
    }

    // 対応していない場合
    else
    {
        // エラーメッセージ
        var errorMessage = "お使いの端末は、GeoLacation APIに対応していません。" ;

        // アラート表示
        alert( errorMessage ) ;

    }
}

views/layouts/application.html.slim

doctype html
html
  head
    meta name="viewport" content="width=device-width, initial-scale=1"
    title
      | DisasterDamageApp
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
    script src="//maps.google.com/maps/api/js?key=AIzaSyDD8_DF2AUAtXfZVcQYFUi3T3AslQKAXaw"
    script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"
    script src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js' type='text/javascript'

  body
 〜〜〜以下省略〜〜〜
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.21%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる