QA@IT

if(){}else if(){}の条件式で、ifの条件式が反映されない

3505 PV

下記のソースコードは、marqueeで動いている文字をストップさせ、次にスタートさせるには
『方向指示ボタン』で方向を決めてから『START』を押さないと機能しませんが、方向が
"右方向"にしか動きません。
これは、ソースコードのfunction Stop_Start(){}の中の"if(marLeft()){ document.
getElementById("blinkL").classList.add("BLINK");}else if(marRight()){document.
getElementById("blinkR").classList.add("BLINK");} "のif(){}が無視されているためです。
これを解決するには、どうすればいいでしょうか。ご教示ください。

<style>
.DIRECTION {
  color: white;
  background: black;
}

.BLINK {
  animation: blink 1s step-end infinite normal;
}
@keyframes blink {
  0% { color: red; }
  50% { color: transparent; }
}
</style>

<script>

 flg=false;
    function Stop_Start(){
      flg = !flg;
         if(flg){
                 document.getElementById("blinkL").classList.remove("BLINK");
                 document.getElementById("blinkR").classList.remove("BLINK");
                 document.getElementById("blinkL").classList.add("DIRECTION");
                 document.getElementById("blinkR").classList.add("DIRECTION");
                 document.getElementById("stopStart").disabled=true;
                 document.getElementById("myMarquee").stop();          
                 flg=true;
           }else{
                 document.getElementById("blinkL").style.color="white";
                 document.getElementById("blinkR").style.color="white";
                 document.getElementById("stopStart").disabled=false;
                 document.getElementById("myMarquee").start();
     if(marLeft()){ document.getElementById("blinkL").classList.add("BLINK");}
else if(marRight()){document.getElementById("blinkR").classList.add("BLINK");} 
             flg=false;          
         }
       document.getElementById("stopStart").value=flg?"START":"STOP";
     }


function marLeft() {

  document.getElementById("stopStart").disabled=false;
  document.getElementById("blinkL").classList.add("BLINK");
  document.getElementById("blinkR").classList.remove("BLINK");
if(flg==true){document.getElementById("blinkL").classList.remove("BLINK");document.getElementById("blinkL").style.color="red";document.getElementById("blinkR").style.color="white";}
else if(flg==false){document.getElementById("blinkL").classList.add("DIRECTION");}
}

function marRight() {

  document.getElementById("stopStart").disabled=false;
  document.getElementById("blinkR").classList.add("BLINK");
  document.getElementById("blinkL").classList.remove("BLINK");
if(flg==true){document.getElementById("blinkR").classList.remove("BLINK");document.getElementById("blinkR").style.color="red";document.getElementById("blinkL").style.color="white";}
else if(flg==false){document.getElementById("blinkR").classList.add("DIRECTION");}
}
</script>

<marquee id="myMarquee">TTTTT</marquee>
<br><br>
<form id="marFunction" name="myForm" style="text-align:center;">
  <input id="blinkL" type="button" class="DIRECTION BLINK" onclick="myMarquee.direction='left'; marLeft();" value="←"> 
       ☆
  <input id="stopStart" type="button" name="stopStart" value=" STOP " onClick="Stop_Start()">
       ☆
  <input id="blinkR" type="button" class="DIRECTION" onclick="myMarquee.direction='right'; marRight();" value="→"> 
</form>

回答

一般にif文の中には論理評価できるものを設定する必要があります。

javascriptに関してはfalse以外に0,null,undefined,ブランク,NaNがfalse扱いされます。
あなたのfunctionは何も返していませんので結果はundefinedとなり

if(undefined){ ... }
else if(undefined){ ... }

と書いているのと同じです。なので両ブロックには絶対に入りません。
(絶対に入らないような条件を()の中に書いてます)

marLeft, marRightで評価できる値を返すようにしてください。
(あなたがifとelse ifに入れたい条件がわからないので何を返すかはそれによって決めてください。)

あと余談ですがmarqueeタグはhtml 5で廃止になるようですのでcssのmarquee系スタイルを使った方がよさそうです。どこかのタイミングで書き換えてみてはどうでしょうか。


コードを見てみましたが、

if(marLeft()){ 
}
else if(marRight()){
} 

の部分は、 myMarquee.direction が 'left'か 'right' かをチェックするようにすれば良いかと思います。

「右方向にしか動かない」とありますが、端までいかないと方向は変わらないようですが、その事でしょうか。

インデントをあともう少し頑張ってくれると回答しやすいです。

編集 履歴 (1)
  • 回答ありがとうございます。

    STOPから左(右)のボタンを押して矢印を"赤"にするまではいいのですが、次にSTARTを押すと、右側はちゃんと"点滅"するのですが、左側も"右の矢印が点滅する"のです。コードの組み立て自体が無理しているようです。頭がこんがらがっています。
    -
  • できたらmarleft, marrightがそれぞれどういう事をする関数として作ったか、簡単に説明してみてください。(各1行ぐらいに簡単に) -
ウォッチ

この質問への回答やコメントをメールでお知らせします。