Change OpenLayers Vector Style Dynamically

HTML

<script src="https://extjs.cachefly.net/ext/gpl/4.2.0/examples/shared/include-ext.js"></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<body onload="init()">
    <div id="map"></div>
    <div id="farbe">
        <h5>Adapt FillColor</h5>
    <div id="my-div"></div>
    </div>
    <div id="deckkraft">
        <h5>Adapt Feature Opacity. Value:  <span id="opa">0.6</span></h5>
    <div id="increment-slider-minValue"></div>
    </div>
    <div id="radius_wrapper">
        <h5>Adapt Feature Size. Value:  <span id="radi">6</span> Pt</h5>
    <div id="radius"></div>
    </div>
    <div>Selected Features: <span id="anzahl"></span></div>
</body>

CSS

@import url(http://fonts.googleapis.com/css?family=Oswald:400, 700, 300);
 html, body {
    font-family:'Oswald', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    color: #2F8CEA;
    width:100%;
    height:100%;
}
#map {
    margin-bottom:5px !important;
    width:100%;
    height:65%;
    border:1px solid #2F8CEA;
    margin: auto;
}


#radius_wrapper
{
    position: absolute;
    left:70%;
    top:70%;
    background: #B5D0D0;
    padding:10px;
    border-radius:5px;
    
}

#deckkraft
{
    position: absolute;
    left:30%;
    top:70%;
    background: #B5D0D0;
    padding:10px;
    border-radius:5px;
    
}

JavaScript

var test;
var map, layer,opacity_new, radius_new;

function init() {
        cp = new Ext.ColorPalette({
        value: '993300'
    }); // initial selected color
    cp.render('my-div');
    cp.hide();
    cp.on('select', function (palette, selColor) {
        console.log(selColor);
        $("#colorbutton").css('background', "#" + selColor);

        /* // works also instead of using a whole new Stylemap:
    vector_layer.styleMap.styles.default.defaultStyle.strokeColor = "#"+selColor;
         vector_layer.styleMap.styles.default.defaultStyle.fillColor ="#"+selColor;
         vector_layer.redraw();
    */
 
        var newStyle = new OpenLayers.Style({
            "fillColor": "#" + selColor,
                "strokeColor": "#" + selColor,
                "fillOpacity": 0.6,
                "strokeOpacity": 1,
                "strokeWidth": 1,
                "strokeLinecap": "round",
                "pointRadius": 6
        });
        

        var sty = OpenLayers.Util.applyDefaults(newStyle, OpenLayers.Feature.Vector.style["default"]);


        
        
        var sm = new OpenLayers.StyleMap({
            'default': sty,
                'select': {
                strokeColor: "red",
                fillColor: "red"
            }
        });
		
       
        
        vector_layer.styleMap = sm;
		
                
         console.log(vector_layer.styleMap.styles.default.defaultStyle.fillOpacity);
        if(opacity_new)
        {
        vector_layer.styleMap.styles.default.defaultStyle.fillOpacity=opacity_new;
        }
		console.log(vector_layer.styleMap.styles.default.defaultStyle.fillOpacity);
        
        
         if(radius_new)
        {
        vector_layer.styleMap.styles.default.defaultStyle.pointRadius=radius_new;
        }
		console.log(vector_layer.styleMap.styles.default.defaultStyle.pointRadius);
        

        vector_layer.redraw();

        cp.hide();



    });

    test = Ext.create('Ext.Button', {
        text: 'Change...