OpenLayers 3 capturing various click events

Question

I am doing a web map application. I want to open a pop-up screen, when the drawing ends. But there is something wrong.

Firstly, if I added a polygon or line in map its okay. But if firstly I added the point its working on point layer, but if I change then add for polygon or line after point layer, When i am drawing the line on every point opening pop-up. Not end of the drawing.

How can I solve this problem?

function addInteraction() {
  draw = new ol.interaction.Draw({
    features: features,
    type: /** @type {ol.geom.GeometryType} */ (typeSelect.value),
    geometryFunction: function(coords, geom) {
      if (typeSelect.value == "Point") {
        if (!geom) geom = new ol.geom.Point(null);
      }
      if (typeSelect.value == "LineString") {
        if (!geom) geom = new ol.geom.LineString(null);
      }
      if (typeSelect.value == "Polygon") {
        if (!geom) geom = new ol.geom.Polygon(null);
      }
      geom.setCoordinates(coords);
      //if linestring changed
      if (coords.length !== coords_length) {
        coords_element.innerHTML = coords;
      }
      return geom;
    }
  });
  draw.on('drawend', function() {
    myFunction()
  });
  map.addInteraction(draw);
}

typeSelect.onchange = function() {
  map.removeInteraction(draw);
  addInteraction();
};

addInteraction();

/**
 * Add a click handler to the map to render the popup.
 */
function myFunction() {
  if (typeSelect.value == "LineString") {
    map.on('dblclick', function(evt) {
      var coordinate = evt.coordinate;
      var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
        coordinate, 'EPSG:3857', 'EPSG:4326'));
      content.innerHTML = '<p>You clicked here:</p><code>' + hdms +
        '</code>';
      overlay.setPosition(coordinate);
    });
  }
  if (typeSelect.value == "Polygon") {
    map.on('dblclick', function(evt) {
      var coordinate = evt.coordinate;
      var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
        coordinate, 'EPSG:3857', 'EPSG:4326'));
      content.innerHTML = '<p>You clicked here:</p><code>' + hdms +
        '</code>';
      overlay.setPosition(coordinate);
    });
  }
  if (typeSelect.value == "Point") {
    map.on('singleclick', function(evt) {
      var coordinate = evt.coordinate;
      var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
        coordinate, 'EPSG:3857', 'EPSG:4326'));
      content.innerHTML = '<p>You clicked here:</p><code>' + overlay + hdms +
        '</code>';
      overlay.setPosition(coordinate);
    });
  }
}

Answer 1

It makes no sense that you use the click events inside a condition or even a function. What I would do to do these is take it out of the function and changing a little bit your logic, for example

   map.on('dblclick', function (evt) {
       if (typeSelect.value == "LineString") {
            var coordinate = evt.coordinate;
            var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
                coordinate, 'EPSG:3857', 'EPSG:4326'));

            content.innerHTML = '<p>You clicked here:</p><code>' + hdms +
                '</code>';
            overlay.setPosition(coordinate);
         }else 
         if (typeSelect.value == "Polygon") {

                 var coordinate = evt.coordinate;
                var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
                coordinate, 'EPSG:3857', 'EPSG:4326'));

                content.innerHTML = '<p>You clicked here:</p><code>' + hdms +
                    '</code>';
                overlay.setPosition(coordinate);
           }
    });
     map.on('singleclick', function (evt) {
           if (typeSelect.value == "Point") {
               var coordinate = evt.coordinate;
            var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
                coordinate, 'EPSG:3857', 'EPSG:4326'));

            content.innerHTML = '<p>You clicked here:</p><code>' + overlay + hdms +
                '</code>';
            overlay.setPosition(coordinate);
           }
     });

Hope this helps, regards!