Нужно нажать кнопку дважды для выполнения функции

Question

Я пытаюсь удалить всплывающее окно, как только я нажму кнопку Add Comment, но мне нужно дважды щелкнуть его, чтобы он работал. Когда я нажимаю его, первый раз две кнопки исчезают и снова появляются. Затем, когда я нажимаю его во второй раз, он исчезает, как следует, и функция работает так, как должна.

Кнопка «Назад» отлично работает, когда всплывающее окно исчезает при первом нажатии. Я предполагаю, что это имеет какое-то отношение к попытке сделать это в моей функции комментариев, но я не могу понять это.

HTML код:

<div data-role="popup" id="popupComment" data-theme="a" class="ui-corner-all"> 
    <form> 
     <div style="padding:10px 20px;"> 
      <h3>Please add comment</h3> 
      <label for="un" class="ui-hidden-accessible">Comment:</label> 
      <input type="text" name="comment" id="comment" value="" placeholder="Comment" data-theme="a"> 
      <button onclick="goCommenting()" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">Add Comment</button> 
      <button onclick="document.getElementById('popupComment').style.display='none'; event.preventDefault();" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">Back</button> 
     </div> 
    </form> 
</div> 

JavaScript код:

function goCommenting(){ 

    //alert(document.getElementById("comment").value); 
    var infoWindow = new google.maps.InfoWindow(); 
    var listener1 = map.addListener('click', function(e) { 

       //var comment = document.getElementById("editNameBox").value; 
       placeMarkerAndPanTo(e.latLng, map,comment); 
      }); 


    function placeMarkerAndPanTo(latLng, map) { 
     var commentMarker = new google.maps.Marker({ 
      position: latLng, 
      map: map, 
      draggable:true 
     }); 
     (function (commentMarker) { 
      google.maps.event.addListener(commentMarker, "click", function (e) { 
       //Wrap the content inside an HTML DIV in order to set height and width of InfoWindow. 
       infoWindow.setContent("<div>'"+document.getElementById("comment").value+"'</div>"); 
       infoWindow.open(map, commentMarker); 
      }); 
     })(commentMarker); 

     //(function (commentMarker) { 
      google.maps.event.addListener(
       commentMarker, 
       'drag', 
       function() { 
        //document.getElementById('lat').value = marker.position.lat(); 
        //document.getElementById('lng').value = marker.position.lng(); 
       } 
       ); 
     //})(commentMarker); 

     google.maps.event.removeListener(listener1); 
    } 
    event.preventDefault(); 
    document.getElementById('popupComment').style.display='none'; 
} 

Answer 1

Try для предотвращения отправки формы событие.

<form onSubmit="return false">