Two clicks of the button to get the correct console.log output

Question

I'm slowly learning & building a map app, which will display a search term on a Google Map using the Google Geocoding API. My issue a present is that I am attempting to view what the search term is at the end of the onclick listener with a console.log (which I will then try to send to Google Geocoding API).

The issue that I'm having is that when I type characters into the search-name & click on the button, I get the console.log output, but at first click it is blank or the previous term if I click once. When I then click again, it displays the correct output.

Presumably, the onclick listener is using the cached term somehow?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      #map-canvas {
        width: 100%;
        height: 600px;
      }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
  </head>

  <body>

    <form id="search">

      <p><input id="search-name" type="text" placeholder="Type Region Here"></p>
      <p><input id="search-submit" type="submit" value="Search For Region"></p>

    </form>

    <p id="demo"></p>

    <div id="map-canvas"></div>

    <script type="text/javascript"> 

      // Global Variables
      var name;

      //map options

      var mapOptions = {
        zoom: 5,
        center: new google.maps.LatLng(37.09024, -100.712891),
        panControl: false,
        panControlOptions: {
          position: google.maps.ControlPosition.BOTTOM_LEFT
        },
        zoomControl: true,
        zoomControlOptions: {
          style: google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.RIGHT_CENTER
        },
        scaleControl: false

      };

      //Fire up Google maps and place inside the map-canvas div
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

      // Button Click    
      document.getElementById("search-submit").addEventListener("click", function(){

      // Search Submit
      $(function() {

        $("#search").submit(function(event){
          event.preventDefault();
          name = $("#search-name").val();
          return name;
        });

      });

      // console.log("Search term after search submit is: "+name);
      console.log("Search term at end is: "+name);

      });

    </script>
  </body>
</html>

EDIT:

For anyone interested in knowing how I fixed it, I did the following (as a separate .js file - but it would work within the script tags):

$(document).ready(function(){

      //Map Options       

      var mapOptions = {
        zoom: 5,
        center: new google.maps.LatLng(37.09024, -100.712891),
        panControl: false,
        panControlOptions: {
          position: google.maps.ControlPosition.BOTTOM_LEFT
        },
        zoomControl: true,
        zoomControlOptions: {
          style: google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.RIGHT_CENTER
        },
        scaleControl: false

      };

      //Map Creation
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

      // Search Submit  
      $("#search").submit(function(event){
            event.preventDefault("", function(){
                  //
                  });

            name = $("#search-name").val();
            console.log("Search term at submit is: "+name);
            return name;
      });

});

`.submit` fires async. – Daniel A. White Oct 16 '15 at 13:00 — Daniel A. White, Oct 16 '15 at 13:00

score 1 · Accepted Answer · answered Oct 16 '15 at 13:00

1

The way you have set up your event listeners results in a situation where the listener on #search is not even activated until you first click the #search-submit once. Probably, you do not intend to have one listener creating another.

Try reorganizing your code:

document.getElementById("search-submit").addEventListener("click", function() {
    ...
});

$("#search").submit(function(event) {

});

Also, if you are in any case using jQuery, why not use it for attaching both listeners.

answered Oct 16 '15 at 13:00

Thernys

723
4
13

Thanks for this. I've been reading further as I've been struggling to get the logic to the above (although I understand roughly what you are saying). I understand query better than javascript, so I'm re-writing it in jquery. – Mr T Oct 16 '15 at 17:27
I've become a bit snowed under & can't see the wood for the trees! – Mr T Oct 16 '15 at 17:28

Two clicks of the button to get the correct console.log output

1 Answers1