I am trying to create a stamp order / preview form for a site and have gotten fairly far on my own, with a little help from Google and of course you all. If you can suggest any other method of going about this, please guide me in the right direction. Also, I need to figure out how to put a border, the same colour as has been chosen in the dropdown selection, around the containing div.
<SCRIPT LANGUAGE="JavaScript">
function setColor() {
var color = document.getElementById("color").value;
document.getElementById("myDiv").style.color = color;
}
function addContent(divName, content) {
document.getElementById(divName).innerHTML = content;
}
function fontSize(size) {
document.getElementById("lineOne").style.fontSize = size
}
function fontFamily(family) {
document.getElementById("lineOne").style.fontFamily = family
}
function fontStyle(style) {
document.getElementById("lineOne").style.fontStyle = style
}
function fontWeight(weight) {
document.getElementById("lineOne").style.fontWeight = weight
}
function align(align) {
document.getElementById("lineOne").style.textAlign = align;
}
function fontSize1(size1) {
document.getElementById("lineTwo").style.fontSize = size1
}
function fontFamily1(family1) {
document.getElementById("lineTwo").style.fontFamily = family1
}
function fontStyle1(style1) {
document.getElementById("lineTwo").style.fontStyle = style1
}
function fontWeight1(weight1) {
document.getElementById("lineTwo").style.fontWeight = weight1
}
function align1(align1) {
document.getElementById("lineTwo").style.textAlign = align1;
}
function fontSize2(size2) {
document.getElementById("lineThree").style.fontSize = size2
}
function fontFamily2(family2) {
document.getElementById("lineThree").style.fontFamily = family2
}
function fontStyle2(style2) {
document.getElementById("lineThree").style.fontStyle = style2
}
function fontWeight2(weight2) {
document.getElementById("lineThree").style.fontWeight = weight2
}
function align2(align2) {
document.getElementById("lineThree").style.textAlign = align2;
}
function fontSize3(size3) {
document.getElementById("lineFour").style.fontSize = size3
}
function fontFamily3(family3) {
document.getElementById("lineFour").style.fontFamily = family3
}
function fontStyle3(style3) {
document.getElementById("lineFour").style.fontStyle = style3
}
function fontWeight3(weight3) {
document.getElementById("lineFour").style.fontWeight = weight3
}
function align3(align3) {
document.getElementById("lineFour").style.textAlign = align3;
}
function border(border) {
document.getElementById("myDiv").style.border = border;
}
function boldText(checkBox,target) {
if(checkBox.checked) {
document.getElementById(target).style.fontWeight = "bold";
}
else {
document.getElementById(target).style.fontWeight = "normal";
}
}
function underlineText(checkBox,target) {
if(checkBox.checked) {
document.getElementById(target).style.textDecoration = "underline";
}
else {
document.getElementById(target).style.textDecoration = "none";
}
}
function italic(checkBox,target) {
if(checkBox.checked){
document.getElementById(target).style.fontStyle = "italic";
}
else {
document.getElementById(target).style.fontStyle = "normal";
}
}
</SCRIPT>
</head>
<body>
<div id="edit">
<h1>Edit text as needed</h1>
<form name="myForm" enctype="multipart/form-data">
<table border="0" width="100%" style="border-collapse: collapse">
<tr>
<td width="278">Text</td>
<td width="165">Font Family</td>
<td width="74">Size</td>
<td width="86">Align</td>
<td><b>B</b></td>
<td><u>U</u></td>
<td><i>I</i></td>
</tr>
<tr>
<td>
<input name="myContent"></input>
<input type="button" value="Add content" onClick="addContent('lineOne', document.myForm.myContent.value); setCookie('content', document.myForm.myContent.value, 7);">
</td>
<td width="165">
<select id="fontFamilyChanger" onchange="fontFamily(this.value)">
<option value="Arial">Arial</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="serif" selected="selected">Times New Roman</option>
<option value="Verdana">Verdana</option>
</select>
</td>
<td width="74">
<select name=fontSizeChanger onchange="fontSize(this.value)">
<option value="6">6</option>
<option value="8">8</option>
<option value="10">10</option>
<option value="12" selected="selected">12</option>
<option value="14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
</select>
</td>
<td width="75">
<select id="textAlignChanger" onchange="align(this.value);">
<option value="left">left</option>
<option value="center" selected="selected">center</option>
<option value="right">right</option>
</select>
</td>
<td>
<input type="checkbox" onclick="boldText(this,'lineOne')">
</td>
<td>
<input type="checkbox" onclick="underlineText(this,'lineOne')">
</td>
<td>
<input type="checkbox" onclick="italic(this,'lineOne')">
</td>
</tr>
<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>
<td width="165">
<select id="fontFamilyChanger" onchange="fontFamily1(this.value)">
<option value="Arial">Arial</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="serif" selected="selected">Times New Roman</option>
<option value="Verdana">Verdana</option>
</select>
</td>
<td width="74">
<select name=fontSizeChanger onchange="fontSize1(this.value)">
<option value="6">6</option>
<option value="8">8</option>
<option value="10">10</option>
<option value="12" selected="selected">12</option>
<option value="14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
</select>
</td>
<td width="75">
<select id="textAlignChanger" onchange="align1(this.value);">
<option value="left">left</option>
<option value="center" selected="selected">center</option>
<option value="right">right</option>
</select>
</td>
<td>
<input type="checkbox" onclick="boldText(this,'lineTwo')">
</td>
<td>
<input type="checkbox" onclick="underlineText(this,'lineTwo')">
</td>
<td>
<input type="checkbox" onclick="italic(this,'lineTwo')">
</td>
</tr>
<tr>
<td>
<input name="myContent2"></input>
<input type="button" value="Add content" onClick="addContent('lineThree', document.myForm.myContent2.value); setCookie('content', document.myForm.myContent2.value, 7);">
</td>
<td width="165">
<select id="fontFamilyChanger" onchange="fontFamily2(this.value)">
<option value="Arial">Arial</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="serif" selected="selected">Times New Roman</option>
<option value="Verdana">Verdana</option>
</select>
</td>
<td width="74">
<select name=fontSizeChanger onchange="fontSize2(this.value)">
<option value="6">6</option>
<option value="8">8</option>
<option value="10">10</option>
<option value="12" selected="selected">12</option>
<option value="14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
</select>
</td>
<td width="75">
<select id="textAlignChanger" onchange="align2(this.value);">
<option value="left">left</option>
<option value="center" selected="selected">center</option>
<option value="right">right</option>
</select>
</td>
<td>
<input type="checkbox" onclick="boldText(this,'lineThree')">
</td>
<td>
<input type="checkbox" onclick="underlineText(this,'lineThree')">
</td>
<td>
<input type="checkbox" onclick="italic(this,'lineThree')">
</td>
</tr>
<tr>
<td>
<input name="myContent3"></input>
<input type="button" value="Add content" onClick="addContent('lineFour', document.myForm.myContent3.value); setCookie('content', document.myForm.myContent3.value, 7);">
</td>
<td width="165">
<select id="fontFamilyChanger" onchange="fontFamily3(this.value)">
<option value="Arial">Arial</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="serif" selected="selected">Times New Roman</option>
<option value="Verdana">Verdana</option>
</select>
</td>
<td width="74">
<select name=fontSizeChanger onchange="fontSize3(this.value)">
<option value="6">6</option>
<option value="8">8</option>
<option value="10">10</option>
<option value="12" selected="selected">12</option>
<option value="14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
</select>
</td>
<td width="75">
<select id="textAlignChanger" onchange="align3(this.value);">
<option value="left">left</option>
<option value="center" selected="selected">center</option>
<option value="right">right</option>
</select>
</td>
<td>
<input type="checkbox" onclick="boldText(this,'lineFour')">
</td>
<td>
<input type="checkbox" onclick="underlineText(this,'lineFour')">
</td>
<td>
<input type="checkbox" onclick="italic(this,'lineFour')">
</td>
</tr>
</table>
</div>
<br>
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>
</form>
<br>
<div id="myDiv">
<div id="lineOne"></div>
<div id="lineTwo"></div>
<div id="lineThree"></div>
<div id="lineFour"></div>
</div>
http://jsfiddle.net/ShauniD/ELER2/
Have a look and let me know!
I need coding advice with this code. Please go easy as this is my first code in JavaScript, and I need good criticism.
+ 'pt'
in thefontSize
function. On a side note, did you consider using a library like jQuery to make the code a bit shorter and less repeating? On the other hand, using a library might actually take away a bit of the language learning process. Just wanted to suggest this to help you avoid writing repeated parts of code for each row. \$\endgroup\$