JavaScriptの質問をしたり答えたりする掲示板 - Boards の投稿独学で躓いてしまった為、初めてこちらの掲示板を利用させて頂きます。何卒お願いいたします。使用エディタはVisualS...

(匿名) #1cf374b2

2020-05-04に更新

JavaScript

独学で躓いてしまった為、
初めてこちらの掲示板を利用させて頂きます。
何卒お願いいたします。
使用エディタはVisualStudioCodeです。

【質問内容】

JavaScript関連動画やWEBページを見ながら練習している初心者です。
絵のような画像を順番にフェードインして並べるプログラムを
実装してみたいのですが、複数表示しようとすると上手くいきません。
参考のWEBページ( https://qiita.com/t-ohtake/items/2997d449e7e243d77109 )

HTMLリソース中の２つのdocument.write() の内１つをコメントアウトすると、
正しく表示されますが、
どちらも順番に表示させようとするとimg_2のようにどちらか一方のみしか表示されません。
また、何回か連続でリロードするとどちらか一方だけに固定されている訳ではなく、
タイミングによってはもう一つの方が表示されると言った感じでした。

原因が分かる方がいらっしゃいましたら恐れ入りますが、
ご教示を頂けますと幸いです。

HTMLコード( index.html )

<!DOCTYPE html>
<html lang="en">
    <title>Document</title>
</head>
<body>

    <!--スクリプト読み込み-->
    <script type="text/javascript" src="index.js"></script>

    <script>

    //画像１表示
    document.write('<IMG src="/Users/apple/Desktop/frontend/img/apple.jpg" id="gazou1" name="gazou1" style="visibility : hidden;" onload="FadeInstr(1)">');

    //画像２表示
    document.write('<IMG src="/Users/apple/Desktop/frontend/img/orange.jpg" id="gazou2" name="gazou2" style="visibility : hidden;" onload="FadeInstr(2)">');

    </script>


</body>
</html>

JavaScriptコード(index.js)



opa=0; //透明度　0は透明
opacnt=3; //透明度の増減の間隔
timer=100; //setTimeout関数の実行間隔　ミリ秒
gazouId = "";//対象の画像

// フェードイン
  function FadeInstr(id)
     {

     //対象の切り替え
          if(id==1){
               gazouId = "gazou1";
          }else{
               gazouId = "gazou2";
          }
        MyIMG = document.getElementById(gazouId);
        MyIMG.style.visibility = "visible";
        FadeIn1(gazouId,opa);

            }
            //透明度を増加。
            function FadeIn1(gazouId,opa)
            {
                if (opa <= 100)
                {
                    MyIMG.style.filter = "alpha(opacity:"+opa+")"; // IE のソース
                    MyIMG.style.opacity = opa/100; //Mozilla Firefoxのソース
                    opa += opacnt;
                    setTimeout("FadeIn1('"+gazouId+"',"+opa+")", timer);
                }
            }