RGBカラーシミュレータ RGB color simulator for JavaScript

JavaScriptの練習がてら
RGBカラーシミュレータを作ってみた

コードはこんな感じです。素人ちっくでごめんなさい。。

<!DOCTYPE html>
<html>
    <head>
			<meta charset="UTF-8">
			<title>RGBカラーシミュレータ</title>

    </head>
    <body>
        <H1>RGBカラーシミュレータ</H1>

		<p>WEB上のRGBカラーとはR(アカ)、G（ミドリ）、B（アオ）の3つの色からなりたってます。</p>
		<p>それぞれの色は0〜255までの256段階あり、0が真っ暗で255がその色の原色となります。</p>
		<p>そしてその3つの色のかけあわせにより色を表現しています。</p>
		<p>RGBカラーは光のかけあわせなので混ぜると明るくなります。</p>
		<p>R、G、Bすべて0で黒、R、G、Bすべて255で白になります。</p></br>
		<p>ここではそれぞれの色の数字をそれぞれ入力して決定ボタンをクリックすることで</p>
		<p>かけあわせた色のシミュレーションができます</p></br>
		<p>どんなかけあわせでどんな色になるか色々試してみてくださいね！</p></br>
		<p>R（アカ　）：<input type="text" id="text1">0〜255までの数字を半角で入れてください</p>
		<p>G（ミドリ）：<input type="text" id="text2">0〜255までの数字を半角で入れてください</p>
		<p>B（アオ　）：<input type="text" id="text3">0〜255までの数字を半角で入れてください</p>
		<p><input type="button" onclick="doAction();" value="決定"></p></br>
		<p>R[<span id="r10" >000</span>]の16進数は[<span id="r16" >000</span>]で色は<span id="rco" >　　</span>です</p>
		<p>G[<span id="g10" >000</span>]の16進数は[<span id="g16" >000</span>]で色は<span id="gco" >　　</span>です</p>
		<p>B[<span id="b10" >000</span>]の16進数は[<span id="b16" >000</span>]で色は<span id="bco" >　　</span>です</p></br>
		<p>三つの要素を混ぜると色は
		 <div id="target" ></div>
		 <p>になります。</p>
		 </br></br>
		<p>HTML上の色指示の表記は[”#”]＋[Rの16進数]＋[Gの16進数]＋[Bの16進数]　</p>
		<p>という文字列なので<span id="iro" >#000000</span>となります。</p>

		<script type="text/javascript">
        <!--

            var target = document.getElementById("target");
            target.style.background = "#000000";
            target.style.width = "100px";
            target.style.height = "50px";

		function doAction(){
            var text1 = document.getElementById("text1");
			var text2 = document.getElementById("text2");
			var text3 = document.getElementById("text3");
            var target = document.getElementById("target");
			var iro = document.getElementById("iro");

			var r10= document.getElementById("r10")
			var r16= document.getElementById("r16")
			var rco= document.getElementById("rco")
			r10.innerHTML=text1.value

			var g10= document.getElementById("g10")
			var g16= document.getElementById("g16")
			var gco= document.getElementById("gco")
			g10.innerHTML=text2.value

			var b10= document.getElementById("b10")
			var b16= document.getElementById("b16")
			var bco= document.getElementById("bco")
			b10.innerHTML=text3.value

			var r_youso= parseInt(text1.value)
			var g_youso= parseInt(text2.value)
			var b_youso= parseInt(text3.value)

			r_youso = "0"+r_youso.toString(16);
			g_youso = "0"+g_youso.toString(16);
			b_youso = "0"+b_youso.toString(16);

			r_youso = r_youso.substr(r_youso.length-2,2)
			g_youso = g_youso.substr(g_youso.length-2,2)
			b_youso = b_youso.substr(b_youso.length-2,2)
			r16.innerHTML=r_youso
			g16.innerHTML=g_youso
			b16.innerHTML=b_youso
			rco.style.background = "#"+r_youso+"0000";
			gco.style.background = "#00"+g_youso+"00";
			bco.style.background = "#0000"+b_youso
			iro.innerHTML= "#"+r_youso+g_youso+b_youso
            target.style.background = "#"+r_youso+g_youso+b_youso

        }
        //-->
        </script>

    </body>
</html>