I have a multipart form to create a custom stamp. I have the main chunck of it working just fine, but am battling to get the border to take on the same colour of the text colour selection. I have a dropdown list for the border px and a dropdown list for the font color. The font colour works, i need the border to work and to take the same colour as the font color. Can you let me know what i have done wrong here.
http://jsfiddle.net/ShauniD/ELER2/11/ (this is the full code, so you can see what i am trying to achieve.
I know there are better methods of doing this, but i am very new,and am learning piece for peice. So go easy if you will.
The Javascript is as follows:
function setColor() {
var color = document.getElementById("color").value;
document.getElementById("myDiv").style.color = color;
}
function addContent(divName, content) {
document.getElementById(divName).innerHTML = content;
}
function border(border) {
document.getElementById("myDiv").style.borderWidth = border;
}
The HTML is as follows:
<tr>
<td>
<input name="myContent1"></input>
<input type="button" value="Add content" onClick="addContent('lineTwo', document.myForm.myContent1.value); setCookie('content', document.myForm.myContent1.value, 7);">
</td>
</tr>
<tr><td>
<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></td></tr>
<tr><td>
<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></td></tr>
</form>
<div id="myDiv">
<div id="lineOne"></div>
<div id="lineTwo"></div>
<div id="lineThree"></div>
<div id="lineFour"></div>
</div>
Please have a look at the full code, so as to understand what it is exactly i am doing.
