Q:

Drawing shapes and features in OpenLayers 4

Using OpenLayers 4, I want to make a map giving the ability to draw shapes AND features. For this I want to combine the draw shapes example with the draw features example, both given on the website of OpenLayers.
I have succeeded in making a point, circle, or polygon from the draw Shapes example. When I select square or Box from the dropdown (both from the Draw features example), I get an error and the map pan around.
Here is my code:
   <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport">
        <title>Draw shapes and features</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.5.0/css/ol.css" type="text/css">
        <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
        <script src="https://openlayers.org/en/v4.5.0/build/ol.js"></script>
      </head>
      <body>
        <div id="map" class="map"></div>
        <form class="form-inline">
          <label>Geometry type &nbsp;</label>
          <select id="type">
            <option value="None">None</option>
            <option value="Point">Point</option>
            <option value="Circle">Circle</option>
            <option value="Square">Square</option>
            <option value="Box">Box</option>
            <option value="Polygon">Polygon</option>
          </select>
        </form>
        <script>
        var raster = new ol.layer.Tile({
            source: new ol.source.OSM()
        });

        var source = new ol.source.Vector({wrapX: false});

        var vector = new ol.layer.Vector({
            source: source
        });

        var map = new ol.Map({
            layers: [raster, vector],
            target: 'map',
            view: new ol.View({
              center: [-11000000, 4600000],
              zoom: 4
            })
        });

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

        var draw; // global so we can remove it later
        function addInteraction() {
            var value = typeSelect.value;
            if (value === 'None'){

            } else {
                var geometryFunction;
                if(value !== 'None' || value !== 'Square' || value !=='Box'){
                    console.log(value)
                    draw = new ol.interaction.Draw({
                        source: source,
                        type: /** @type {ol.geom.GeometryType} */(typeSelect.value)
                    });
                } else if(value === 'Square'){
                    console.log(value)
                    value = 'Circle';
                    geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
                    draw = new ol.interaction.Draw({
                        source: source,
                        type: /** @type {ol.geom.GeometryType} */ (value),
                        geometryFunction: geometryFunction
                    });
                } else if(value === 'Box'){
                    console.log(value)
                    value = 'Circle';
                    geometryFunction = ol.interaction.Draw.createBox();
                    draw = new ol.interaction.Draw({
                        source: source,
                        type: /** @type {ol.geom.GeometryType} */ (value),
                        geometryFunction: geometryFunction
                    });
                };
                map.addInteraction(draw)
            };
        };

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

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

See my jsFiddle to see my issue.
How do I combine the 'draw shapes' and 'draw features' in one map using OpenLayers? 

A:

You made a mistake on the condition.
if(value !== 'None' || value !== 'Square' || value !=='Box'){
should be
if(value !== 'None' && value !== 'Square' && value !=='Box'){
with your condition, though the value is 'Square', it won't go to else if (value === 'Square') because value !== 'None' is true.

