show/hide border around containing div? Javascript

Question

I am trying to create a stamp form/preview for a site and am very new to javascript. I am battling to get the border px to show in the same colour as that in the colour selection box.

The javascript is:

function setColor()   {     
var color = document.getElementById("color").value;     
document.getElementById("myDiv").style.color = color;   
} 
function border(border) {
document.getElementById("myDiv").style.border = border;
}

The CSS for the divs are as follows:

#myDiv  {
position:relative;
width:100px;
height:100px;
float:left;
overflow:hidden;
border:1px solid #f1f1f1;
text-align:center;
}

#lineOne    {
position:relative;
padding:5px;
}

#lineTwo    {
position:relative;
padding:5px;
}

#lineThree  {
position:relative;
padding:5px;
}

#lineFour   {
position:relative;
padding:5px;
}   

And the HTML like so:

Colour:
    <select id="color" onclick="setColor();">
        <option value="white">white</option>           
        <option value="black" selected="selected">black</option>           
        <option value="red">red</option>           
        <option value="lightblue">light blue</option>           
        <option value="darkblue">dark blue</option>           
        <option value="lightgreen">light green</option>           
        <option value="darkgreen">dark green</option>           
        <option value="yellow">yellow</option>           
        <option value="orange">orange</option>           
        <option value="pink">pink</option>           
        <option value="purple">purple</option>           
        <option value="gray">gray</option>         
    </select> 

    <select id="border"  onchange="border(this.value);">
        <option value="1px solid" selected="selected">1px</option>
        <option value="2px solid">2px</option>
        <option value="3px solid">3px</option>
        <option value="4px solid">4px</option>
        <option value="5px solid">5px</option>
    </select>


<div id="myDiv>
    <div id="lineOne">Some text here</div>
    <div id="lineTwo">Mores text here</div>
    <div id="lineThree">And even more</div>
    <div id="lineFour">And last text here</div>

Please can you tell me how to change the border px as well as change the border colour to that of the colour dropdown selection.

Answer 1

You want to use borderColor

function setColor()   {     
  var color = document.getElementById("color").value;  
  document.getElementById("myDiv").style.borderColor = color;   
}

Change onclick to onChange for the color <select/>

By modifying the border property you will effectively remove the associated color, change the value to 1px - 5px and use borderWidth

Instead of querying the dom each time, you can cache the element in a variable. var myDiv = document.getElementById("myDiv");

Putting that all together you will end up with something like this:

var myDiv = document.getElementById("myDiv");

function setColor(elem) {
    myDiv.style.borderColor = elem.value;
}

function border(elem) {
    myDiv.style.borderWidth = elem.value;
}

<select id="color" onchange="setColor(this);">
     <option value="white">white</option>           
     <option value="black" selected="selected">black</option>           
     <option value="red">red</option>           
     <option value="lightblue">light blue</option>           
     <option value="darkblue">dark blue</option>           
     <option value="lightgreen">light green</option>           
     <option value="darkgreen">dark green</option>           
     <option value="yellow">yellow</option>           
     <option value="orange">orange</option>           
     <option value="pink">pink</option>           
     <option value="purple">purple</option>           
     <option value="gray">gray</option>         
</select> 
<select id="border"  onchange="border(this);">
     <option value="1px" selected="selected">1px</option>
     <option value="2px">2px</option>
     <option value="3px">3px</option>
     <option value="4px">4px</option>
     <option value="5px">5px</option>
</select>
<div id="myDiv">
    <div id="lineOne">Some text here</div>
    <div id="lineTwo">Mores text here</div>
    <div id="lineThree">And even more</div>
    <div id="lineFour">And last text here</div>
</div>

Example on jsfiddle

If you want to be very pragmatic, you can even simplify it more by passing in the style property

function setStyle(elem, prop){
    myDiv.style[prop] = elem.value;
}

Answer 2

Use style.borderColor:

function setColor()   {     
    var color = document.getElementById("color").value;     
    document.getElementById("myDiv").style.borderColor = color;   
}