I'm having trouble getting the alignment to work with my dropdown list that styles the font of a div. It's frustrating because I usually find solutions easily on Google, but this time the align feature is really bugging me.
<SCRIPT LANGUAGE="JavaScript">
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 addContent(divName, content) {
document.getElementById(divName).innerHTML = content;
}
function setColor() {
var color = document.getElementById("color").value;
document.getElementById("myDiv").style.color = color;
}
function alignl(ele){
document.getElementById("lineOne").style.align = ele
}
</SCRIPT>
And the body is configured as follows:
<body>
Size:
<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>
Colour:
<select id="color" onclick="setColor();">
<option value="white">white</option>
<optionvalue="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>
Family:
<select id="fontFamilyChanger" onchange="fontFamily(this.value)">
<option value="sans-serif" selected="selected">Sans Serif</option>
<option value="Impact">Impact</option>
<option value="times new roman">Times New Roman</option>
</select>
Style:
<select id="fontStyleChanger" onchange="fontStyle(this.value)">
<option value="normal" selected="selected">Normal</option>
<option value="italic">Italic</option>
<option value="oblique">Oblique</option>
</select>
Weight:
<select id="fontWeightChanger" onchange="fontWeight(this.value)">
<option value="normal" selected="selected">Normal</option>
<option value="bold">Bold</option>
</select>
Align:
<select id='s' name='s' onchange="alignl(this.value);">
<option value="left">left</option>
<option value="right">right</option>
<option value="center">center</option>
<option value="top">top</option>
</select>
<form name="myForm">
<input name="myContent"></input>
<input type="button" value="Add content" onClick="addContent('lineOne', document.myForm.myContent.value); setCookie('content', document.myForm.myContent.value, 7);">
</form>
<div id="myDiv">
<div id="lineOne"></div>
</div>
</body>