Replace OpenLayers draw form select options by button

Question

I am trying to replace the openlayers draw features form by button. I have created three buttons for point, line and polygon features draw. When clicking the first button (value = point) it works fine but clicking second button it doesn't change the drawing value properties (like value = line). Below is my code:

    <input id="type" type="button" value="Point">
    <input id="type" type="button" value="Linestring">
    <input id="type" type="button" value="Polygon">

    ...

    var typeSelect = document.getElementById('type');

    document.getElementById('type').onclick = function addInteraction() {
      var draw = new ol.interaction.Draw({
        source: source,
        type: typeSelect.value
      });
      map.addInteraction(draw);
    }


    /**
     * Handle change event.
     */
    typeSelect.onchange = function() {
      map.removeInteraction(draw);
      addInteraction();
    };

    addInteraction();

Answer 1

Problem with your approach is that all the input buttons have the same id, and when you are referencing element by document.getElementById('type'), you get HTML element only for the first one.

@Ashok Vanam ESRIAu answer is in the right direction, but to bring context of button to function, it has to be passed as parameter. Also removing of possible previous interaction has to be included.

So working code should look something like this (tested):

<input type="button" value="Point" onclick="addInteraction(this)">
<input type="button" value="LineString" onclick="addInteraction(this)">
<input type="button" value="Polygon" onclick="addInteraction(this)">

...

var draw = null; 
function addInteraction(button) {
  var value = button.value;
  if (draw != null) {
    map.removeInteraction(draw);
  }
  draw = new ol.interaction.Draw({
    source: source,
    type: value
  });
  map.addInteraction(draw);
}

Answer 2

Function declaration and assignment is on same line. split them up like this

 function addInteraction() {
      var draw = new ol.interaction.Draw({
        source: source,
        type: typeSelect.value
      });
      map.addInteraction(draw);
    }

document.getElementById('type').onclick = addInteraction()

Answer 3

The code is not properly tied up with HTML controls. Please check the code:

<  id="typePoint" type="button" value="Point" onclick ="addInteraction()" >
    < input id="typeLine" type="button" value="Linestring" onclick ="addInteraction()" >
    < input id="typePolygon" type="button" value="Polygon" onclick ="addInteraction()"  >

    ...

   // var typeSelect = document.getElementById('type');

    function addInteraction() {
      var draw = new ol.interaction.Draw({
        source: source,
        type: this.value
      });
      map.addInteraction(draw);
    }

Please note this code haven't tested for drawing functions but give a try...it should work otherwise please reach me here will help you further.