QA@IT
«質問へ戻る

質問を投稿

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

下記のソースコードは、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>
下記のソースコードは、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>
```