9695


下記のコードは、"マウスストーカー(デジタル)"に『背景色ボタン』と『トグルボタン』をリンクさせたものですが、トグルボタンの表示が"clock
on"⇔"clock off"でははなくて、"0"⇔"1"と表示されるところまで詰まって、その先は進みません。  
どこに問題があるのか、ご教示いただけませんでしょうか？

[code]

    <!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">
    <!--
    .css{
        font-size:16px; 
        font-weight:bold;       
    }
    //-->
    </style>
    
    
    <script type="text/javascript"> 
    <!--
    function setTimeColors(color){
      if(moji){
        for(var i=0;i<moji.length;i++){
          var elem=document.getElementById("Time"+i);
          if(elem)elem.style.color=color;
        }
      }
    }
    function color1(){
      document.bgColor = "black";  
      document.fgColor = "gold";
      setTimeColors("red");
    }
    function color2(){
      document.bgColor = "red";
      document.fgColor = "grey";
      setTimeColors("purple");
    }
    function color3(){
      document.bgColor = "white";
      document.fgColor = "blue";
      setTimeColors("maroon");
    }
    // -->
    </script>
    
    <script type="text/javascript"><!--
    msec=100;               //追従速度
    fx=20;                  //表示位置ｘ座標
    fy=-10;                 //表示位置y座標
    fs=6;                   //文字の大きさ
    fc="blue";              //文字色
    F_face="Times New Roman";//フォント
    //--------------------------------------
    
    now=new Date();
    (now.getHours()<10)?H="0"+now.getHours():H=now.getHours();
    (now.getMinutes()<10)?M="0"+now.getMinutes():M=now.getMinutes();
    (now.getSeconds()<10)?S="0"+now.getSeconds():S=now.getSeconds();
    
    moji=H+":"+M+":"+S;
    
    x=new Array();y=new Array();cnt = 0;
    for (i=0; i<=moji.length; i++) {x[i] = -10;y[i] = -10; }
    for(i=0;i<moji.length;i++){
      document.write(
        "<DIV style='position:absolute;z_index:2;top:-10px;left:-10px;' ID='Fonts"+i+"'>"
        +"<font face='"+F_face+"' size="+fs+" color="+fc+" ID='Time"+i+"'>"
        +moji.charAt(i)+"</font></DIV>");
    }
    function F_move(NNevent){
      if(document.all){
        x[0]=event.x;y[0]=event.y;
      }else{
        x[0]= NNevent.pageX;y[0]= NNevent.pageY;
      }
    }
    function F_run(){
      for (i=moji.length-1; i>=0; i--){
        if(i){x[i] = x[i-1]+fs*3;y[i] = y[i-1];}
        if(document.all){
          document.all("Fonts"+i).style.pixelTop=y[i]+fy+document.body.scrollTop;
          document.all("Fonts"+i).style.pixelLeft=x[i]+fx+document.body.scrollLeft;
        }else{
          document.getElementById("Fonts"+i).style.top=y[i]+fy+"px";
          document.getElementById("Fonts"+i).style.left=x[i]+fx+"px";
        }
      }
    }
    setInterval('F_run()',msec);
    document.onmousemove = F_move;
    
    function nowtime(){
      now=new Date();
      (now.getHours()<10)?H="0"+now.getHours():H=now.getHours();
      (now.getMinutes()<10)?M="0"+now.getMinutes():M=now.getMinutes();
      (now.getSeconds()<10)?S="0"+now.getSeconds():S=now.getSeconds();
      moji=H+":"+M+":"+S;
    
      for(i=0;i<moji.length;i++){
        document.getElementById("Time"+i).innerHTML=moji.charAt(i);
      }
    }
    setInterval("nowtime()",1000);
    
    num = 0;
    function toggle(){
     num ^= 1; 
    document.getElementById("tog").value = num;
     if(num == 1){ 
     for(var i=0;i<moji.length;i++)
    document.getElementById("Fonts"+i).style.visibility="visible";} 
    else { 
     for(var i=0;i<moji.length;i++)
    document.getElementById("Fonts"+i).style.visibility="hidden"; }
    }
    // -->
    </script>
    </HEAD>
    <BODY>
    
    <Font size="5"><b>デジタル時計</b></font> 
    
    <center><p>
    <INPUT style="BORDER-RIGHT: grey 1px solid; BORDER-TOP:
    grey 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: grey 
    1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;
    FONT-FAMILY: ms gothic; BACKGROUND-COLOR: black"
    onclick="color1();document.getElementById('text').style.color='lightblue';document.getElementById('text1').style.color='lightblue'" 
    type="button" value="
    　">
    <INPUT style="BORDER-RIGHT: grey 1px solid; BORDER-TOP:
    grey 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: grey
    1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;
    FONT-FAMILY: ms gothic; BACKGROUND-COLOR: red"
    onclick="color2();document.getElementById('text').style.color='gold';document.getElementById('text1').style.color='gold'" 
    type="button" value="
     ">
    <INPUT style="BORDER-RIGHT: black 1px solid; BORDER-TOP:
    grey 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: grey 
    1px solid; COLOR: black; BORDER-BOTTOM: grey 1px solid;
    FONT-FAMILY: ms gothic; BACKGROUND-COLOR: white"
    onclick="color3();document.getElementById('text').style.color='purple';document.getElementById('text1').style.color='purple'" 
    type="button" value="
    　">
    </p></center>
    <br><br><br><br>
    <marquee class="css"><span id="text" style="font-size:30; color:green">"0"⇔"1"</span>ではなくて、<span id="text1" style="font-size:30; color:green">"clock off"⇔"clock on"</span>と切り替えて表示ようにするには？
    </marquee>
    <br><br><br><br><br><br>
    <center><p>
     <input type="button" id="tog" value="clock OFF" onclick="toggle()">
    </p></center>
    </BODY>
    </HTML>
    
[/code]


CC BY-SA 3.0
2015-04-30T10:41:07.533
9693
2015-04-30T11:27:56.780
2015-04-30T11:27:56.780
440
9359
question
javascript html
ボタンの切り替え表示を、数値(0と1)や真偽(trueとfalse)ではなくて、"on"⇔"off"と切り替えるには？


以下の行が誤っています。

[code]

    document.getElementById("tog").value = num;
    
[/code]

↓

[code]

    document.getElementById("tog").value = num ?"clock on":"clock off";
    
[/code]


CC BY-SA 3.0
2015-04-30T10:45:12.797
9694
2015-04-30T10:45:12.797
5750
9693
answer


以下の様に修正

[code]

    num = 1;
    function toggle(){
     num ^= 1; 
    document.getElementById("tog").value = num ? "clock OFF" : "clock ON";
    
[/code]


CC BY-SA 3.0
2015-04-30T10:49:46.780
9695
2015-04-30T10:49:46.780
5044
9693
answer