JavaScriptサンプル(背景色エディタ)

JavaScriptで背景色エディタを作ってみました。ちょっと応用すれば、背景色と、テキスト色の調整をおこなうこともできるでしょう・・・・・と思ったのですが、何故だか小技を使わないとうまくいかない。

このソースコードは以下のようになります。

<HTML>
<HEAD>
<TITLE>JavaScript Sample(Background Color Editor)</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
    function color(text, flag) {
	n = "0123456789ABCDEF".indexOf(text.value) + flag;
	n = Math.max(0, Math.min(n, 15));
	text.value = "0123456789ABCDEF".charAt(n);
	document.bgColor =
	    "#" +
	    document.form1.r1.value +
	    document.form1.r2.value +
	    document.form1.g1.value +
	    document.form1.g2.value +
	    document.form1.b1.value +
	    document.form1.b2.value;
    }
    function init() {
	document.bgColor;
	document.form1.r1.value = document.bgColor.charAt(1).toUpperCase();
	document.form1.r2.value = document.bgColor.charAt(2).toUpperCase();
	document.form1.g1.value = document.bgColor.charAt(3).toUpperCase();
	document.form1.g2.value = document.bgColor.charAt(4).toUpperCase();
	document.form1.b1.value = document.bgColor.charAt(5).toUpperCase();
	document.form1.b2.value = document.bgColor.charAt(6).toUpperCase();
    }
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<H2>JavaScriptサンプル(背景色エディタ)</H2>
<FORM NAME="form1" ACTION="">
<TABLE>
<TR>
<TD><INPUT TYPE="button" VALUE="↑" onClick="color(this.form.r1, 1)"></TD>
<TD><INPUT TYPE="button" VALUE="↑" onClick="color(this.form.r2, 1)"></TD>
<TD><INPUT TYPE="button" VALUE="↑" onClick="color(this.form.g1, 1)"></TD>
<TD><INPUT TYPE="button" VALUE="↑" onClick="color(this.form.g2, 1)"></TD>
<TD><INPUT TYPE="button" VALUE="↑" onClick="color(this.form.b1, 1)"></TD>
<TD><INPUT TYPE="button" VALUE="↑" onClick="color(this.form.b2, 1)"></TD>
</TR>
<TR>
<TD><INPUT TYPE="text" NAME="r1" SIZE=3 VALUE=""></TD>
<TD><INPUT TYPE="text" NAME="r2" SIZE=3 VALUE=""></TD>
<TD><INPUT TYPE="text" NAME="g1" SIZE=3 VALUE=""></TD>
<TD><INPUT TYPE="text" NAME="g2" SIZE=3 VALUE=""></TD>
<TD><INPUT TYPE="text" NAME="b1" SIZE=3 VALUE=""></TD>
<TD><INPUT TYPE="text" NAME="b2" SIZE=3 VALUE=""></TD>
</TR>
<TR>
<TD><INPUT TYPE="button" VALUE="↓" onClick="color(this.form.r1, -1)"></TD>
<TD><INPUT TYPE="button" VALUE="↓" onClick="color(this.form.r2, -1)"></TD>
<TD><INPUT TYPE="button" VALUE="↓" onClick="color(this.form.g1, -1)"></TD>
<TD><INPUT TYPE="button" VALUE="↓" onClick="color(this.form.g2, -1)"></TD>
<TD><INPUT TYPE="button" VALUE="↓" onClick="color(this.form.b1, -1)"></TD>
<TD><INPUT TYPE="button" VALUE="↓" onClick="color(this.form.b2, -1)"></TD>
</TR>
</TABLE>
</FORM> 
</BODY> 
</HTML>