OpenLayers 2 change style (color, width) dynamically:

HTML

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<body onload="init()">
    OpenLayers 2 change style (color, width) dynamically //
    Color:<select onchange="stylechange('color',this)">
        <option value="#000000">black</option>
        <option value="#FF0000">red</option>
        <option value="#00FF00">green</option>
        <option value="orange">orange</option>
    </select>
    Width:
     <select onchange="stylechange('width',this)">
        <option value="3">3pt</option>
        <option value="4">4pt</option>
        <option value="5">5pt</option>
         <option value="8">8pt</option>
         <option value="10">10pt</option>
    </select>
    <div id="map" style="width: 600px; height: 300px; border: 1px solid black"></div>
    <div id="info"></div>
    
</body>

CSS

@import url(http://fonts.googleapis.com/css?family=Oswald:400,700,300);
body
{
    font-family:"Oswald";
      font-size: 14px;  
}

select {
  font-size: 14px;
  font-family: 'Oswald';
}

JavaScript

var farbe, staerke;

function init() {
    farbe = "black";staerke=3;
    var map = new OpenLayers.Map({
        div: "map",
        center: new OpenLayers.LonLat(0, 0),
        minResolution: "auto",
        maxResolution: "auto"
    });

    map.addControl(new OpenLayers.Control.LayerSwitcher());

    var layerOSM = new OpenLayers.Layer.OSM();
    map.addLayer(layerOSM);



    map.setCenter(new OpenLayers.LonLat(0, 0), 0);

  var defStyle1 = {strokeColor: "Darkblue", strokeOpacity: "0.5", strokeWidth:3,  cursor: "pointer", fillColor: "Darkblue"};
var style1 = OpenLayers.Util.applyDefaults(defStyle1,OpenLayers.Feature.Vector.style["default"]);
    var styleMap = new OpenLayers.StyleMap({
        "default": style1
    });

    var vectorLayer = new OpenLayers.Layer.Vector("myLayer", {
        styleMap: styleMap
    });

    var drawControl = new OpenLayers.Control.DrawFeature(
    vectorLayer,
    OpenLayers.Handler.Path);
    map.addControl(drawControl);
    drawControl.activate();

    vectorLayer.events.register("sketchcomplete", drawControl, function (event) {
        event.feature.attributes.color = farbe;

        
        var defStyle1 = {strokeColor: farbe, strokeOpacity: "0.5", strokeWidth:staerke,  cursor: "pointer", fillColor: farbe};
var tempstyle = OpenLayers.Util.applyDefaults(defStyle1,OpenLayers.Feature.Vector.style["default"]);
        
        
        
        
        
        event.feature.style=tempstyle;
        console.log(event.feature);

        //vectorLayer.redraw();
    });

    /*
 
 vectorLayer.events.on({
    'sketchcomplete': function(obj) {
        console.log(obj.feature.style);
       var interactive_style = OpenLayers.Util.applyDefaults(interactive_style, OpenLayers.Feature.Vector.style['default']);
myFirstLineStyle.strokeColor = farbe;
myFirstLineStyle.strokeWidth = 8;
        obj.feature.style=interactive_style;
        vectorLayer.redraw();
    }
});
*/


    map.addLayer(vectorLayer);

}

function stylechange(type,combo)...