javascript value 設定できない

Question

前提・実現したいこと

Google Maps Api を用いて、緯度経度を取得できるフォームを製作しています。
地図から緯度経度を取得することは出来たのですが、それらの値を<input>に設定することが出来ません。
その際に、以下のような問題が出たので質問させていただきました。

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

Uncaught TypeError: Cannot set property 'defaultValue' of null

該当のソースコード

<input type="hidden" name="lat" id="lat">
<input type="hidden" name="lng" id="lng">
<input type="hidden" name="location" id="location">

    <script>
      function initMap() {
        'use strict';

        let target = document.getElementById('target');
        let tokyo = {lat: 35.6812362000000, lng: 139.7671248000000};
        let marker;

        let map = new google.maps.Map(target, {
          center: tokyo,
          zoom: 15
        });

        let input = (document.getElementById('event-locationautocomplete'));

        let autocomplete = new google.maps.places.Autocomplete(input);
        autocomplete.bindTo('bounds', map);

        let infowindow = new google.maps.InfoWindow();
        marker = new google.maps.Marker({
          map: map,
          anchorPoint: new google.maps.Point(0, -30)
        });

        autocomplete.addListener('place_changed', function() {
          infowindow.close();
          marker.setVisible(false);
          let place = autocomplete.getPlace();

          if (!place.geometry) {
            window.alert("No details available for input: '" + place.name + "'");
            return;
          }

          if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
          } else {
            map.setCenter(place.geometry.location);
            map.setZoom(15);
          }

          marker.setIcon( /** @type {google.maps.Icon} */ ({
            url: place.icon,
            size: new google.maps.Size(70, 70),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(15, 35),
            scaledSize: new google.maps.Size(35, 35)
          }));
          marker.setPosition(place.geometry.location);
          marker.setVisible(true);
          let item_Lat = place.geometry.location.lat();
          let item_Lng = place.geometry.location.lng();
          let item_Location = place.formatted_address;

          alert("Lat= "+item_Lat+"_____Lang="+item_Lng+"_____Location="+item_Location);

          document.getElementById('#lat').value = "item_Lat";
          document.getElementById('#lng').value = "item_Lng";
          document.getElementById('#location').value = "item_Locatio";

          let address = '';
          if (place.address_components) {
            address = [
              (place.address_components[0] && place.address_components[0].short_name || ''),
              (place.address_components[1] && place.address_components[1].short_name || ''),
              (place.address_components[2] && place.address_components[2].short_name || '')
            ].join(' ');
          }

          infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
          infowindow.open(map, marker);
        });
      }
    </script>

試したこと

inputのvalueに設定する手前で、alertを用いて取得出来ているか確認。
値は取得できていた。

Comments

[m.ts10806]

コードはマークダウンのcode機能を利用してご提示ください

[kkhaa]

ご指摘有難う御座います。

Answer 1

document.getElementById('lat').value = item_Lat;
document.getElementById('lng').value = item_Lng;
document.getElementById('location').value = item_Location;

簡単なミスでした。

＃が必要ありませんでした。

Answer 2

それらの値を<input>に設定することが出来ません。

input要素には 変数名（文字列）を代入しています。
ダブルクォートで囲まず、変数の値が代入されるようにするとどうでしょうか。

document.getElementById('#lat').value = item_Lat;
document.getElementById('#lng').value = item_Lng;
document.getElementById('#location').value = item_Location;

Comments

[kkhaa]

ご回答有難う御座います。

変更したものの、同じエラーが出てしまいます。

[AkitoshiManabe]

エラーメッセージは検索にかけるとヒントを得られるかもしれませんね。API利用に当たって必要な設定が他にもあるのかな…とも感じました。API仕様・サンプルコードの再確認をオススメします（「試したこと」として質問を更新されると他の方からの回答も得られやすいでしょう）。

[kkhaa]

承知しました。
アドバイス有難う御座います。