combining size2 select and color2 select into a textArea

[dotJoon]

<script type="text/javascript">

window.onload = function() {
  var sel = document.getElementsByName('sizeChanger')[0];
  sel.onchange = function() {
    var tArea = document.getElementById('t1');
    tArea.focus();
    var selection;
    if (tArea.selectionStart) {
      var selStart = tArea.selectionStart, selEnd = tArea.selectionEnd;
      var selBeforeStart = tArea.value.substr(0, selStart),
          selAfterEnd = tArea.value.substr(selEnd, tArea.value.length);
      selection = tArea.value.substr(selStart, selEnd - selStart);
      tArea.value = selBeforeStart + '[size' + this.value + ']' + selection + '[/size]' + selAfterEnd;
    }
    else if (document.selection) {
      selection = document.selection.createRange();
      selection.text = '[size' + this.value + ']' + selection.text + '[/size]';
    }
  }
}
</script>

<form name="myform">

<select name="sizeChanger">
<option value="noSize" style="color:gray">size</option>
<option value="1">size1</option>
<option value="2">size2</option>
</select><br>

<textarea name="box" id="t1" style="width:300px;height:200px">myText</textarea> 

</form>

A user can generate [size] tag with the code above at http://dot.kr/test/16-1.htm

<script type="text/javascript">

window.onload = function() {
  var sel = document.getElementsByName('colorChanger')[0];
  sel.onchange = function() {
    var tArea = document.getElementById('t1');
    tArea.focus();
    var selection;
    if (tArea.selectionStart) {
      var selStart = tArea.selectionStart, selEnd = tArea.selectionEnd;
      var selBeforeStart = tArea.value.substr(0, selStart),
          selAfterEnd = tArea.value.substr(selEnd, tArea.value.length);
      selection = tArea.value.substr(selStart, selEnd - selStart);
      tArea.value = selBeforeStart + '[color' + this.value + ']' + selection + '[/font]' + selAfterEnd;
    }
    else if (document.selection) {
      selection = document.selection.createRange();
      selection.text = '[color' + this.value + ']' + selection.text + '[/font]';
    }
  }
}
</script>

<form name="myform">

<select name="colorChanger">
<option value="noColor" style="color:gray">color</option>
<option value="1">color1</option>
<option value="2">color2</option>
</select><br>

<textarea name="box" id="t1" style="width:300px;height:200px">myText</textarea> 

</form>

A user can generate [color] tag with the code above at http://dot.kr/test/16-2.htm


I like to combine size select and color select into one textArea.
The following code and its result at http://dot.kr/test/16-3.htm doesn't work correctly, but it will show what I want.

<script type="text/javascript">

window.onload = function() {
  var sel = document.getElementsByName('sizeChanger')[0];
  sel.onchange = function() {
    var tArea = document.getElementById('t1');
    tArea.focus();
    var selection;
    if (tArea.selectionStart) {
      var selStart = tArea.selectionStart, selEnd = tArea.selectionEnd;
      var selBeforeStart = tArea.value.substr(0, selStart),
          selAfterEnd = tArea.value.substr(selEnd, tArea.value.length);
      selection = tArea.value.substr(selStart, selEnd - selStart);
      tArea.value = selBeforeStart + '[size' + this.value + ']' + selection + '[/size]' + selAfterEnd;
    }
    else if (document.selection) {
      selection = document.selection.createRange();
      selection.text = '[size' + this.value + ']' + selection.text + '[/size]';
    }
  }
}

window.onload = function() {
  var sel = document.getElementsByName('colorChanger')[0];
  sel.onchange = function() {
    var tArea = document.getElementById('t1');
    tArea.focus();
    var selection;
    if (tArea.selectionStart) {
      var selStart = tArea.selectionStart, selEnd = tArea.selectionEnd;
      var selBeforeStart = tArea.value.substr(0, selStart),
          selAfterEnd = tArea.value.substr(selEnd, tArea.value.length);
      selection = tArea.value.substr(selStart, selEnd - selStart);
      tArea.value = selBeforeStart + '[color' + this.value + ']' + selection + '[/font]' + selAfterEnd;
    }
    else if (document.selection) {
      selection = document.selection.createRange();
      selection.text = '[color' + this.value + ']' + selection.text + '[/font]';
    }
  }
}

</script>


<form name="myform">

<select name="sizeChanger">
<option value="noSize" style="color:gray">size</option>
<option value="1">size1</option>
<option value="2">size2</option>
</select>

<select name="colorChanger">
<option value="noColor" style="color:gray">color</option>
<option value="1">color1</option>
<option value="2">color2</option>
</select><br>

<textarea name="box" id="t1" style="width:300px;height:200px">myText</textarea> 

</form>

[Raffles]

Well, you can't have two window.onload() = { } closures because the second one overwrites the first one. Just change the name of "sel" to something else and incorporate the code from the second one (starting with the onchange function) into the second one.

One problem you might face is that in both IE and firefox after adding the tags, the selected text is no longer selected.

[dotJoon]

Well, you can't have two window.onload() = { } closures because the second one overwrites the first one. Just change the name of "sel" to something else and incorporate the code from the second one (starting with the onchange function) into the second one.

GOT!

One problem you might face is that in both IE and firefox after adding the tags, the selected text is no longer selected.

Hm~~, as I test it in detail I face the problem in IE7 at http://dot.kr/test/16-1.htm. (I don't mind whether it works or not in fireFox at the moment.)

After I select size1, I can select size2, but I can't select size1 in serial.

Is there any way to fix this problem?

(I guess it needs some kinds of clearing.)