22805


下記のソースコードは、『RESET』ボタンを押すと”マーキーＡ”と"マーキーＢ"が  
ともにリセットするように設定されたものです。  
これを"マーキーＡ"のみをリセット("マーキーＢ"は、そのまま流れる)させるには、  
どのように書き換えればいいのでしょうか。ご教示ください。

[code]

     <STYLE type="text/css">
      .form{ 
         display: inline;
           }
     </style>
    
     <script>
           flag=false;
              function Stop_Start(){
                 flag = !flag;
                  if(flag) {
                    document.getElementById("myMarquee").start(); 
                            }
                      else {
                    document.getElementById("myMarquee").stop(); 
                         　 }
                    document.myForm.tog.value=flag?"STOP":"START";
                                     }
     </script>
    
     <MARQUEE id='myMarquee'> 
    　　    マーキーＡ(＊リセットする)
    　</MARQUEE> 
    
    　　<div>
          <FORM class="form" name="myForm">
            <INPUT type="button" name="tog" value="STOP" onclick="Stop_Start()">
          </FORM>
          <form class="form" >
            <INPUT type="button" value="RESET" ONCLICK="location.reload()"> 
          </form>
        </div>
    
     <MARQUEE> 
    　　    マーキーＢ(＊リセットしない)
    　</MARQUEE> 
    
[/code]


CC BY-SA 3.0
2016-03-04T11:38:43.407
22803
2016-03-07T15:51:39.267
2016-03-07T15:51:39.267
9359
9359
question
javascript html
１つのページ内に複数のmarquee要素がある場合に、１つのmarquee要素のみをリセットするには


ざっと調べてみると marquee 要素をリセットする手軽な手段はないようです。marquee要素そのものを作りなおすのはどうでしょうか。

[code]

    <script>
    function resetMarquee() {
        var oldMarquee = document.querySelector('#myMarquee');
        oldMarquee.parentNode.insertBefore(oldMarquee.cloneNode(true), oldMarquee);
        oldMarquee.parentNode.removeChild(oldMarquee);
    }
    </script>
    ...
    <input type="button" value="RESET" onclick="resetMarquee()">
    
[/code]


CC BY-SA 3.0
2016-03-04T12:40:07.213
22805
2016-03-04T12:54:58.963
2016-03-04T12:54:58.963
3475
3475
22803
answer


回答をいただいた箇所に下記のように書き足しましたら、『トグルボタン』でもうまくいきました。  
ただ、"flag=true(false)"を,"num=1(0)"に変えたらうまくいきませんので、この"flag=true(false)"は  
上(function Stop_Start(){})に記述されている"flag=true(false)"と同一のものとして判別されている  
のかもしれません。

[code]

        function resetMarquee() {
            var oldMarquee = document.querySelector('#myMarquee');
            oldMarquee.parentNode.insertBefore(oldMarquee.cloneNode(true), oldMarquee);
            oldMarquee.parentNode.removeChild(oldMarquee);         
         if(flag=true){
    　　　         　　　document.myForm.tog.value="STOP";
                    flag=false;
                            }
    }
         </script>
    
         <MARQUEE id='myMarquee'> 
        　　    マーキーＡ(＊リセットする)
        　</MARQUEE> 
    
        　　<div>
              <FORM class="form" name="myForm">
                <INPUT type="button" name="tog" value="STOP" onclick="Stop_Start()">
              </FORM>
              <form class="form" >
                <input type="button" value="RESET" onclick="resetMarquee()">
              </form>
            </div>
    
         <MARQUEE> 
        　　    マーキーＢ(＊リセットしない)
        　</MARQUEE> 
    
[/code]


CC BY-SA 3.0
2016-03-04T17:51:36.430
22816
2016-03-07T14:57:56.313
2016-03-07T14:57:56.313
9359
9359
22803
answer