2

マウスストーカーのアナログ時計が気に入ってカスタマイズしています。
ふと気になった箇所があって希望通りに修正しようといろいろ試したのですが、
うまくいきません。
"付け消しボタン"で消しているときは、"色付けボタン"も水面下で機能しないように
する
には、どうすればいいでしょうか?

ボタンの記号は、次の通りです。
・C=clock color(全体の色)
・D=date color
・F=face color
・H=hours color
・M=minutes color
・S=seconds color

なお、全体のソースコードは、次の通りです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> 

<TITLE>妖怪クロック(アナログ) - JavaScript</TITLE>

<style type="text/css">
<!--
.butt{
BACKGROUND:maroon; 
COLOR:gold;
}
//-->
</style>


<BODY bgcolor="black" text="white">

<div id="clock" style="visibility:hidden">
    <div id="Od" style="position:absolute;top:0px;left:0px">
        <div style="position:relative">
        </div>
    </div>

    <div id="Of" style="position:absolute;top:0px;left:0px">
        <div style="position:relative">
        </div>
    </div>

    <div id="Oh" style="position:absolute;top:0px;left:0px">
        <div style="position:relative">
        </div>
    </div>

    <div id="Om" style="position:absolute;top:0px;left:0px">
        <div style="position:relative">
        </div>
    </div>

    <div id="Os" style="position:absolute;top:0px;left:0px">
        <div style="position:relative">
        </div>
    </div>
</div>

<script type="text/javascript">

// 状態変数>
var scale = 1;
var transitionStarted = 0;
var transitionFrom = 0;
var transitionTo = 0;
var transitionDuration = 0;

// サイズの変更を開始する処理
function changeSIZE(){
{
    transitionStarted = new Date().getTime();
    transitionFrom = scale;
    transitionTo = 0.5; // 最終的な倍率。状態により変化
    transitionDuration = 400;
document.getElementById("tog1").value= "\BIGGER/";
}
if(transitionFrom==0.5){
    transitionTo =  2.5; // 最終的な倍率。状態により変化
    transitionDuration = 400;
document.getElementById("tog1").value= "ORIGINAL";
}
if(transitionFrom==2.5){
    transitionTo =  1; // 最終的な倍率。状態により変化
    transitionDuration = 400;
document.getElementById("tog1").value= "/LESSER\";
}
}

(function(){
    "use strict";

function $(sel)
{
    return document.getElementById(sel);
}

function $$(sel)
{
    if (typeof document.getElementsByClassName === 'undefined')
    {
        return document.getElementsByName(sel);
    }
    return document.getElementsByClassName(sel);
}

var dCol = '', //date colour.
    sCol = '', //seconds colour.
    mCol = '', //minutes colour.
    hCol = '', //hours colour.
    fCol = '', //face color

    ClockHeight = 65,
    ClockWidth = 65,
    ClockFromMouseY = 0,
    ClockFromMouseX = 100,
    d = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
    m = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
    date = new Date(),
    day = date.getDate(),
    year = date.getYear() + 1900;
var TodaysDate = " " + d[date.getDay()] + " " + day + " " + m[date.getMonth()] + " " + year;
var D = TodaysDate.split('');
var H = '☆☆☆';
    H = H.split('');
var M = '☆☆☆☆';
    M = M.split('');
var S = '・・・・・';
    S = S.split('');
var Face = '1 2 3 4 5 6 7 8 9 10 11 12',
    font = 'Helvetica, Arial, sans-serif',
    size = 1,
    speed = 0.45;
    Face = Face.split(' ');
var n = Face.length;
var a = size * 10;
var ymouse = 0,
    xmouse = 0,
    scrll = 0,
    props = '<span style="font-family:' + font + ';font-size:' + size + 'em; color:#' + fCol + '">',
    props2 = '<span style="font-family:' + font + ';font-size:' + size + 'em; color:#' + dCol + '">';
var Split = 360 / n;
var Dsplit = 360 / D.length;
var HandHeight = ClockHeight / 4.5; 
var HandWidth = ClockWidth / 4.5;
var HandY = -7,
    HandX = -2.5,
    step = 0.02,
    currStep = 0,
    y = [],
    x = [],
    Y = [],
    X = [],
    Dy = [],
    Dx = [],
    DY = [],
    DX = [];
var i;

for (i = 0; i < n; i++) 
{
    y[i] = 0;
    x[i] = 0;
    Y[i] = 0;
    X[i] = 0;
}

for (i = 0; i < D.length; i++) 
{
    Dy[i] = 0;
    Dx[i] = 0;
    DY[i] = 0;
    DX[i] = 0;
}
var wrapper = $('clock');
var html = '';
// Date wrapper

html = '';

for (i = 0; i < D.length; i++)
{
    html += '<div class="Date" name="Date" style="position:absolute;top:0px;left:0;height:' + a + ';width:' + a + ';text-align:center">' + props2 + D[i] + '</span></div>';
}
$('Od').children[0].innerHTML = html;

// Face wrapper

html = '';

for (i = 0; i < n; i++) 
{
    html += '<div class="Face" name="Face" style="position:absolute;top:0px;left:0;height:' + a + ';width:' + a + ';text-align:center">' + props + Face[i] + '</span></div>';
}
$('Of').children[0].innerHTML = html;
// Hours wrapper

html = '';

for (i = 0; i < H.length; i++)
{
    html += '<div class="Hours" name="Hours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + hCol + ';text-align:center;font-weight:bold">' + H[i] + '</div>';
} 
$('Oh').children[0].innerHTML = html;
// Minute wrapper

html = '';

for (i = 0; i < M.length; i++)
{
    html += '<div class="Minutes" name="Minutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + mCol + ';text-align:center;font-weight:bold">' + M[i] + '</div>';
} 
$('Om').children[0].innerHTML = html;
// Seconds wrapper

html = '';

for (i = 0; i < S.length; i++)
{
    html += '<div class="Seconds" name="Seconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + sCol + ';text-align:center;font-weight:bold">' + S[i] + '</div>';
} 
$('Os').children[0].innerHTML = html;
// Mouse move event handler

function Mouse(evnt) 
{
    if (typeof evnt === 'undefined')
    {
        ymouse = event.Y + ClockFromMouseY;
        xmouse = event.X + ClockFromMouseX;
    }
    else
    {
        ymouse = evnt.clientY + ClockFromMouseY;
        xmouse = evnt.clientX + ClockFromMouseX;
    }
}

document.onmousemove = Mouse;

function ClockAndAssign() 
{
    var time = new Date();

    // 状態変更処理
    if(transitionStarted)
    {
        var d = time.getTime() - transitionStarted;
        if (d < transitionDuration)
        {
            scale = transitionFrom + (transitionTo - transitionFrom) * d / transitionDuration;
        }
        else
        {
            // トランジション終了
            scale = transitionTo;
            transitionStarted = 0;
        }
    }

    var secs = time.getSeconds();
    var sec = -1.57 + Math.PI * secs / 30;
    var mins = time.getMinutes();
    var min = -1.57 + Math.PI * mins / 30;
    var hr = time.getHours();
    var hrs = -1.575 + Math.PI * hr / 6 + Math.PI * parseInt(time.getMinutes(), 10) / 360;
    $('Od').style.top = window.document.body.scrollTop;
    $('Of').style.top = window.document.body.scrollTop;
    $('Oh').style.top = window.document.body.scrollTop;
    $('Om').style.top = window.document.body.scrollTop;
    $('Os').style.top = window.document.body.scrollTop;

    for (i = 0; i < n; i++)
    {
        var F = $$('Face')[i];
        F.style.top = y[i] + scale * ClockHeight * Math.sin(-1.0471 + i * Split * Math.PI / 180) + scrll;
        F.style.left = x[i] + scale * ClockWidth * Math.cos(-1.0471 + i * Split * Math.PI / 180);
    }

    for (i = 0; i < H.length; i++)
    {
        var HL = $$('Hours')[i];
        HL.style.top = y[i] + HandY + scale * (i * HandHeight) * Math.sin(hrs) + scrll;
        HL.style.left = x[i] + HandX + scale * (i * HandWidth) * Math.cos(hrs);
    }

    for (i = 0; i < M.length; i++)
    {
        var ML = $$('Minutes')[i].style;
        ML.top = y[i] + HandY + scale * (i * HandHeight) * Math.sin(min) + scrll;
        ML.left = x[i] + HandX + scale * (i * HandWidth) * Math.cos(min);
    }

    for (i = 0; i < S.length; i++)
    {
        var SL = $$('Seconds')[i].style;
        SL.top = y[i] + HandY + scale * (i * HandHeight) * Math.sin(sec) + scrll;
        SL.left = x[i] + HandX + scale * (i * HandWidth) * Math.cos(sec);
    }

    for (i = 0; i < D.length; i++)
    {
        var DL = $$('Date')[i].style;
        DL.top = Dy[i] + scale * ClockHeight * 1.5 * Math.sin(currStep + i * Dsplit * Math.PI / 180) + scrll;
        DL.left = Dx[i] + scale * ClockWidth * 1.5 * Math.cos(currStep + i * Dsplit * Math.PI / 180);
    }
    currStep -= step;
}

function Delay() 
{
    scrll = 0;
    Dy[0] = Math.round(DY[0] += ((ymouse) - DY[0]) * speed);
    Dx[0] = Math.round(DX[0] += ((xmouse) - DX[0]) * speed);

    for (i = 1; i < D.length; i++) {
        Dy[i] = Math.round(DY[i] += (Dy[i - 1] - DY[i]) * speed);
        Dx[i] = Math.round(DX[i] += (Dx[i - 1] - DX[i]) * speed);
    }
    y[0] = Math.round(Y[0] += ((ymouse) - Y[0]) * speed);
    x[0] = Math.round(X[0] += ((xmouse) - X[0]) * speed);

    for (i = 1; i < n; i++) {
        y[i] = Math.round(Y[i] += (y[i - 1] - Y[i]) * speed);
        x[i] = Math.round(X[i] += (x[i - 1] - X[i]) * speed);
    }
    ClockAndAssign();
    setTimeout(Delay, 20);
}

Delay();

}());

num = 1;
function toggle(){
 num ^= 1; 
if(num == 1){
    document.getElementById('clock').style.visibility="hidden";
    document.getElementById('tog1').onclick=null;
} 
else {
    document.getElementById('clock').style.visibility="visible";
    document.getElementById('tog1').onclick=changeSIZE;
}
document.getElementById("tog").value = num ?" APPEAR ":"KILL(切る)";
}
//-->
</script>

<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<center><p>
<input class="butt" type="button" id="tog" value="今何時?" onclick="toggle()">
<input class="butt" id="tog1" type="button" value="/LESSER\" onclick="changeSIZE()">
</p></center>

<div>
<center>
<div>
<input type="button" value="C" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:white" onclick="document.getElementById('Od').style.color='white';document.getElementById('Of').style.color='white';document.getElementById('Oh').style.color='white';document.getElementById('Om').style.color='white';document.getElementById('Os').style.color='white'">
<input type="button" value="C" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:lightskyblue" onclick="document.getElementById('Od').style.color='lightskyblue';document.getElementById('Of').style.color='lightskyblue';document.getElementById('Oh').style.color='lightskyblue';document.getElementById('Om').style.color='lightskyblue';document.getElementById('Os').style.color='lightskyblue'">
<input type="button" value="C" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:yellow" onclick="document.getElementById('Od').style.color='yellow';document.getElementById('Of').style.color='yellow';document.getElementById('Oh').style.color='yellow';document.getElementById('Om').style.color='yellow';document.getElementById('Os').style.color='yellow'">
<input type="button" value="C" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:lime" onclick="document.getElementById('Od').style.color='lime';document.getElementById('Of').style.color='lime';document.getElementById('Oh').style.color='lime';document.getElementById('Om').style.color='lime';document.getElementById('Os').style.color='lime'">
<input type="button" value="C" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:deeppink" onclick="document.getElementById('Od').style.color='deeppink';document.getElementById('Of').style.color='deeppink';document.getElementById('Oh').style.color='deeppink';document.getElementById('Om').style.color='deeppink';document.getElementById('Os').style.color='deeppink'">
<input type="button" value="C" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:mediumblue" onclick="document.getElementById('Od').style.color='mediumblue';document.getElementById('Of').style.color='mediumblue';document.getElementById('Oh').style.color='mediumblue';document.getElementById('Om').style.color='mediumblue';document.getElementById('Os').style.color='mediumblue'">
<input type="button" value="C" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:maroon" onclick="document.getElementById('Od').style.color='maroon';document.getElementById('Of').style.color='maroon';document.getElementById('Oh').style.color='maroon';document.getElementById('Om').style.color='maroon';document.getElementById('Os').style.color='maroon'">
</div>
<div>
<input type="button" value="D" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:maroon" onclick="document.getElementById('Od').style.color='maroon'">
<input type="button" value="D" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:mediumblue" onclick="document.getElementById('Od').style.color='mediumblue'">
<input type="button" value="D" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:deeppink" onclick="document.getElementById('Od').style.color='deeppink'">
<input type="button" value="D" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:lime" onclick="document.getElementById('Od').style.color='lime'">
<input type="button" value="D" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:yellow" onclick="document.getElementById('Od').style.color='yellow'">
<input type="button" value="D" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:lightskyblue" onclick="document.getElementById('Od').style.color='lightskyblue'">
<input type="button" value="D" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:white" onclick="document.getElementById('Od').style.color='white'">
</div>
<div>
<input type="button" value="F" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:maroon" onclick="document.getElementById('Of').style.color='maroon'">
<input type="button" value="F" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:mediumblue" onclick="document.getElementById('Of').style.color='mediumblue'">
<input type="button" value="F" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:deeppink" onclick="document.getElementById('Of').style.color='deeppink'">
<input type="button" value="F" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:lime" onclick="document.getElementById('Of').style.color='lime'">
<input type="button" value="F" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:yellow" onclick="document.getElementById('Of').style.color='yellow'">
<input type="button" value="F" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:lightskyblue" onclick="document.getElementById('Of').style.color='lightskyblue'">
<input type="button" value="F" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:white" onclick="document.getElementById('Of').style.color='white'">
</div>
<div>
<input type="button" value="H" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:maroon" onclick="document.getElementById('Oh').style.color='maroon'">
<input type="button" value="H" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:mediumblue" onclick="document.getElementById('Oh').style.color='mediumblue'">
<input type="button" value="H" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:deeppink" onclick="document.getElementById('Oh').style.color='deeppink'">
<input type="button" value="H" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:lime" onclick="document.getElementById('Oh').style.color='lime'">
<input type="button" value="H" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:yellow" onclick="document.getElementById('Oh').style.color='yellow'">
<input type="button" value="H" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:lightskyblue" onclick="document.getElementById('Oh').style.color='lightskyblue'">
<input type="button" value="H" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:white" onclick="document.getElementById('Oh').style.color='white'">
</div>
<div>
<input type="button" value="M" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:maroon" onclick="document.getElementById('Om').style.color='maroon'">
<input type="button" value="M" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:mediumblue" onclick="document.getElementById('Om').style.color='mediumblue'">
<input type="button" value="M" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:deeppink" onclick="document.getElementById('Om').style.color='deeppink'"> 
<input type="button" value="M" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:lime" onclick="document.getElementById('Om').style.color='lime'">
<input type="button" value="M" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:yellow" onclick="document.getElementById('Om').style.color='yellow'">
<input type="button" value="M" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:lightskyblue" onclick="document.getElementById('Om').style.color='lightskyblue'">
<input type="button" value="M" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:white" onclick="document.getElementById('Om').style.color='white'">
</div>
<div>
<input type="button" value="S" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:maroon" onclick="document.getElementById('Os').style.color='maroon'">
<input type="button" value="S" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:mediumblue" onclick="document.getElementById('Os').style.color='mediumblue'">
<input type="button" value="S" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:deeppink" onclick="document.getElementById('Os').style.color='deeppink'">
<input type="button" value="S" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:lime" onclick="document.getElementById('Os').style.color='lime'">
<input type="button" value="S" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:yellow" onclick="document.getElementById('Os').style.color='yellow'">
<input type="button" value="S" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:lightskyblue" onclick="document.getElementById('Os').style.color='lightskyblue'">
<input type="button" value="S" style="BORDER-RIGHT: grey 1px solid; BORDER-TOP: grey 1px solid; FONT-SIZE: 8pt; FONT-WEIGHT:BOLD; BORDER-LEFT: grey 1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;FONT-FAMILY: ms gothic; BACKGROUND-COLOR:white" onclick="document.getElementById('Os').style.color='white'">
</div>
</center></div>
<br>

</body>
</html>
1
  • </head>がありません。
    – BLUEPIXY
    Commented 2015年6月3日 13:16

1 件の回答 1

0

ボタンを機能しないようにするには、HTMLでは
<button id="B" type="button" onclick="func()" disabled>ボタン</button>
のように
disabled 属性を指定します。(<input type="button"..も同じ)
(そうすると表示はされているがかすんだような表示(ブラウザによります)になってボタンを押しても反応しなくなります。)
javascriptからは、
dobument.getElementById('B').disabled=true;
の様にtrueを設定することで、機能しないようにすることができて、
dobument.getElementById('B').disabled=false;
の様にfalseを設定することで、機能するように戻せます。
沢山のボタンを切り替える場合には、クラス付けをしておいて
getElementsByClassNameを使うかjQueryからそれぞれを設定しなおす。
ようなことになるでしょうけど、
機能しない間は表示させておく必要も無いと思うので、
色つけボタン群を囲むdividを付けて非表示にするのがいいと思います。

5
  • 回答をありがとうございました。手こずりましたが、うまくいきました。 ボタンが多かったので、1行だけしかやっていませんが、全部うまくいくと 思います。 "disabled"ではなくて"disable"は試してみましたが、HTMLとJavascriptの 両方に設定するのでしたか? htmlの中にある"func()"は、35個ありますので、"function func1(){document.getElementById('clock').style.color="~"; }”ということを、35個設定するわけですね。 色つけボタン群を囲むdivにidを付けて非表示にする,"非表示"とは、"<div id="~" style="visibility:hidden">でいいのですか?
    – user9359
    Commented 2015年6月3日 18:07
  • @user9359 1) HTMLとJavascriptの 両方に設定するのでしたか? HTMLに書かなくてもjavascriptから設定できます。 2) よくわかりませんが、ボタン毎に属性を設定する必要があるので、ボタン毎に行う必要があります。jQueryを使うとまとめてできるので楽できると思います。 3) そうです。javascriptから該当divのstylevisibilityを設定すればいいと思います。既にやっていることですよね。
    – BLUEPIXY
    Commented 2015年6月3日 18:15
  • javascriptの方に設定すると希望道りの動きをしますが、 htmlの方はボタンの切り替えも,onのときの色の切り替えも 機能しないです。 divにidを付けて非表示にすれば、悩まなくて済みました。 これが便利なので、採用します。 <head>が、いつの間にか抜け落ちていました。 気を付けておきます。
    – user9359
    Commented 2015年6月4日 13:15
  • HTMLに書く必要はありません。(DISABLED属性はボタンを機能しないようにするのでその通りの動作です)
    – BLUEPIXY
    Commented 2015年6月4日 13:20
  • ふと気づきましたが、HTMLのそれぞれのカラーボタンにも"disabled"を 設定しておかないと、時計を出す前にカラーボタンを出してそれぞれのボタンを押すと、水面下で切り替えが行われています(*2回目以降は"disabled"の効果が反映されますが…)。 回答をいただかなければ、永久に分からず仕舞いで、途中で投げ出したかもしれません。 ありがとうございました。
    – user9359
    Commented 2015年6月17日 10:31

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。