セレクトボックスの初期化に伴い、それに連動する設定も戻す方法
下記のソースコードは、『APPEAR/KILL』ボタンで、"KILL(切る)"を押すことで、
それぞれのセレクトボックスの、選択状態、色（選択状態によって変えています）、及びそれらに連動させているメッセージの設定（蛇の描画に使います）を初期の状態になるように試みたものです。
選択状態と色は初期の状態に出来ました。
しかし、『メッセージボタン』だけは、function moglo(){}のif式内に
document.getElementById('iemsg' + i).innerHTML=null;
などを入れても、メッセージの設定が初期の状態に戻らないのです。
何らかの記述を加えなければならないようですが、組み立てがうまくいきません。
ご教示をお願いします。
それと『カラーボタン』は、ボタンそのものに色が付けられますが、『メーセージ
ボタン』と『サイズボタン』は、"value"に違う値があるためにボタンに色が付け
られません。どうすればいいでしょうか。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<TITLE>メッセージ・サイズ・カラーのボタンと初期の状態- JavaScript</TITLE>
<STYLE type="text/css">
<!--
body{
color:gold;
background-color:black;
}
.butt{
BACKGROUND:maroon; COLOR:gold;
}
#myText {
color: white;
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
VISIBILITY:HIDDEN;
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#myText div {position: relative;}
#myText div div {position: absolute;top: 0;left: 0;text-align: center;}
//
//-->
</STYLE>
<SCRIPT type="text/javascript">
<!--
var size = 30;
function siz(opt){
document.getElementById('myText').style.fontSize=opt.options[opt.selectedIndex].value;
}
function message(opt)
{
var currentLength = msg.length;
var t = opt.options[opt.selectedIndex].value;
// 状態の変更
msg = t.split('');
n = msg.length - 1;
// 文字要素の変更
for (var i = Math.max(currentLength, msg.length) - 1; i > -1; --i)
{
var d = i < currentLength ? document.getElementById('iemsg' + i) : null;
if (d)
{
if (i < t.length)
{
// 既存要素の内容変更
d.innerHTML = msg[i];
}
else
{
// 不要になった要素の削除
d.parentElement.removeChild(d);
}
}
else
{
// 不足要素の追加
d = document.createElement('div');
d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
}
}
}
var msg = "２蛇２蛇２蛇２蛇２蛇２蛇２蛇２蛇２蛇２蛇２蛇２蛇☆★☆★。。。。";
var circleY = 0.75;
var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.4;
var speed = 0.3;
if (!window.addEventListener
&& !window.attachEvent
|| !document.createElement)
throw 'error';
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY;
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX;
},
makecircle = function(){
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'myText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
num = 1;
function mogglo(){
num ^= 1;
if(num == 1){
document.getElementById('myText').style.fontSize=30;
document.getElementById('myText').style.color="white";
document.getElementById('myText').style.visibility="hidden";
document.getElementById('size').selectedIndex=1;
document.getElementById('size').disabled=true;
document.getElementById('mess').disabled=true;
document.getElementById('mess').selectedIndex=0;
document.getElementById('sCol').style.background="";
document.getElementById('sCol').disabled=true;
}
else {
document.getElementById('myText').style.visibility="visible";
document.getElementById('size').disabled=false;
document.getElementById('mess').disabled=false;
document.getElementById('sCol').disabled=false;
}
document.getElementById("togglo").value = num ?" APPEAR ":"KILL(切る)";
}
// -->
</SCRIPT>
<script type="text/javascript">
<!--
function hebi(opt){
d=document.getElementById('myText').style.color=opt.options[opt.selectedIndex].value;
document.getElementById("sCol").style.background=opt.options[opt.selectedIndex].value;
}
//-->
</script>
</HEAD>
<BODY>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<div style="text-align:center">
<input class="butt" type="button" id="togglo" value="APPEAR" onclick="mogglo()">
</div>
<br>
<div style="text-align:CENTER;">
<select id="mess" onchange="message(this)" disabled>
<option style="background-color:lightskyblue;font-weight:bold" value="１蛇１蛇１蛇１蛇１蛇１蛇１蛇１蛇１蛇１蛇１蛇１蛇☆★☆★。。。。">メッセージ１</option>
<option style="background-color:yellow;font-weight:bold" value="２蛇２蛇２蛇２蛇２蛇２蛇２蛇２蛇２蛇２蛇２蛇２蛇☆★☆★。。。。" selected>メッセージ２</option>
<option style="background-color:yellow;font-weight:bold" value="３蛇３蛇３蛇３蛇３蛇３蛇３蛇３蛇３蛇３蛇３蛇３蛇☆★☆★。。。。">メッセージ３</option>
</select>
<select id="size" onchange="siz(this)" disabled>
<option style="background-color:pink;font-weight:bold" value="40">サイズ(大)</option>
<option style="background-color:lightskyblue;font-weight:bold" value="30" selected>サイズ(中)</option>
<option style="background-color:yellow;font-weight:bold" value="20">サイズ(小)</option>
</select>
<select id="sCol" onchange="hebi(this)" disabled>
<option style="background-color:white;font-weight:bold" value="white" selected>色(ヘビ)</option>
<option style="background-color:lightskyblue;font-weight:bold" value="lightskyblue">色(ヘビ)</option>
<option style="background-color:yellow;font-weight:bold" value="yellow">色(ヘビ)</option>
<option style="background-color:lime;font-weight:bold" value="lime">色(ヘビ)</option>
<option style="background-color:deeppink;font-weight:bold" value="deeppink">色(ヘビ)</option>
<option style="background-color:mediumblue;font-weight:bold" value="mediumblue">色(ヘビ)</option>
<option style="background-color:#8b0000;font-weight:bold" value="#8b0000">色(ヘビ)</option>
</select>
</div>
</BODY>
</HTML>