Uncaught TypeError: Cannot set property 'innerHTML'

As soon a visitor fills in a value it will be pushed an error inside console. I have noticed from internet it is an issue with the loading content and script but API code is done async defer

  1. On another contact form it is pushed:
    jInvalidValueError: not an instance of HTMLInputElement
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=XXX&language=de" async defer></script>

  1. I have tested a script using Autocomplete but there is a message:
    Uncaught TypeError: Cannot set property ‘innerHTML’ of XXX null

  2. Uncaught TypeError: document.getElementById(…) is null even I set ‘’; when it is filled in street address: ```
    on(‘change’, ‘#’+searchInput, function ()
    Code is the following:

var searchInput = 'search_input';

  $(document).ready(function ()
   {
    var autocomplete;
    autocomplete = new google.maps.places.Autocomplete((document.getElementById(searchInput)),
     {
     types:['geocode'],
     }
    );

    google.maps.event.addListener(autocomplete, 'place_changed', function ()
     {
      var near_place = autocomplete.getPlace();
      document.getElementById('latvalue').value = near_place.geometry.location.lat();
      document.getElementById('lngvalue').value = near_place.geometry.location.lng();

      document.getElementById('latshow1').innerHTML = near_place.geometry.location.lat();
      document.getElementById('lngshow1').innerHTML = near_place.geometry.location.lng();
     }
    );
   }
  );

  $(document).on('change', '#'+searchInput, function ()
   {
      document.getElementById('latvalue').value = '';
      document.getElementById('lngvalue').value = '';

      document.getElementById('latshow1').innerHTML = '';
      document.getElementById('lngshow1').innerHTML = '';
   }
  );

Show us the HTML.

Based on this code and error, either “latshow1” or “lngshow1” does not exist as an ID in your html.

In fact you are right. But latshow1 and lngshow1 is not hidden element. Is this an issue and I place as hidden elements? I will need to test.

<input type="hidden" id="latvalue" name="latvalue" />
<input type="hidden" id="lngvalue" name="lngvalue" />

Point number 3 is fixed: **Uncaught TypeError: document.getElementById(…) is null using HTML element.

How to solve point number one?
Issue: jInvalidValueError: not an instance of HTMLInputElement

Thank you for all help. I have solved point number one and two inside Console. If you use two ID’s it will not work.

var searchInput = 'ID1';
var searchInput = 'ID2';
1 Like