質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.09%

javascriptで「自動スライドショー コメント付き」を同html内に複数動作させるには

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,497

score 11


前提・実現したいこと

javascriptで「自動スライドショー コメント付き」を同html内に2つ動作させるようにしたいのですが、片方は動くのですが、もう片方は動きません。
どうしたら2つ同時に動くのでしょうか。原因がわかりません。
初心者なのですが、どうか教えてください。

ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="GENERATOR" content="JustSystems Homepage Builder Version 19.0.7.0 for Windows">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <link rel="stylesheet" href="mycss.css">
    <title>Javascriptの練習</title>
    <script type="text/javascript" src="myscriptA.js"></script>
    <script type="text/javascript" src="myscriptB.js"></script>
</head>
<body>

    <div id="container">

    <div id="header">
        <h1><img src="l_246.jpg" height="100" width="600"></h1>
        </div>

    <div id="main">

        <div id="contents">
            <h1>雲</h1>
            <img src="a1.jpg" id="Ga" style="">
            <div id="Me" style="">雲 きれいです</div>

            <script type="text/javascript" src="myscriptA.js"></script>

        </div><!--#contents-->

        <div id="sidebar">
            <h1>ひまわり</h1>
            <img src="b1.jpg" id="Gaa" style="">
            <div id="Mea" style="">ひまわり きれいです</div>

            <script type="text/javascript" src="myscriptB.js"></script>

        </div><!--#sidebar-->

    </div><!--main-->

    <div id="footer">Copyright 2015,dotinstall.com</div>

    </div><!--#container-->
</body>
</html>
html{
  background-image: url('07.gif');
  height: 100%;
}
body{
    height: 100%;
    font-family: Verdana,Arial;
    font-size: 14px;
}
body > #container{
    height: auto;
}

#container{
    min-height:100%;
    height: 100%;
    width: 800px;
    margin: 0 auto;
    padding: 0 10px;
    background-color: #fff;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
}
#header{
  margin-bottom: 15px;
}

#main{
  overflow: hidden;
}

#contents{
  float: left;
  width: 400px;
}
#sidebar{
  float: right;
  width: 400px;
}

#footer{
      font-size: 12px;
      color: #ccc;
      text-align: center;
      border-top: 1px solid #ccc;
      padding: 10px 0 20px;
}

 /*★ここからコピー。画像とコメントの位置指定。#Gaと#Meは必須。好みで変更*/

#Ga{
    margin: 0px auto 0;/*★画像の中央位置指定(上 左右 下)*/
    width: 400px;/*★画像横幅*/
    height: 350px;/*★画像縦幅*/
    display: block;/*★ブロック要素指定。上記の中央位置指定を有効にする為*/
}
#Me{
    margin: 5px auto;/*★コメントの中央位置指定(上下 左右)*/
    width: 400px;/*★コメントの横幅=画像の横幅。変更しても可*/
    border: 1px solid #ccc;/*★コメントの枠線 灰色*/
    padding: 3px 15px;/*★コメントの余白(上下 左右)*/
    box-sizing: border-box;/*★コメント領域内にパディング領域及びボーダー領域も含む*/
}
#Gaa{
    margin: 0px auto 0;/*★画像の中央位置指定(上 左右 下)*/
    width: 400px;/*★画像横幅*/
    height: 350px;/*★画像縦幅*/
    display: block;/*★ブロック要素指定。上記の中央位置指定を有効にする為*/
}
#Mea{
    margin: 5px auto;/*★コメントの中央位置指定(上下 左右)*/
    width: 400px;/*★コメントの横幅=画像の横幅。変更しても可*/
    border: 1px solid #ccc;/*★コメントの枠線 灰色*/
    padding: 3px 15px;/*★コメントの余白(上下 左右)*/
    box-sizing: border-box;/*★コメント領域内にパディング領域及びボーダー領域も含む*/
}
//myscriptA.js の内容です。

var n=0,i=0;
//★画像とコメントの同時指定。増減可能。["画像","コメント"]; の2個をこの順番で記述。コメントにタグ使用の時は「"」ではなく「'」を使用
var ga= new Array;
ga[n++]=["a1.jpg","雲 きれいです"];
ga[n++]=["a2.jpg","雲多い きれいです"];
ga[n++]=["a3.jpg","虹もきれい"];
ga[n++]=["a4.jpg","コスモスは 風にゆれてる"];
ga[n++]=["a5.jpg","青い空 この世界はほんとうに<span style='color:red;'>きれい</span>です"];

var myurl="";      //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分
var spd=3000;     //★画像切替時間 1000=1秒

function Show(){ Ga.src=myurl+ga[i%ga.length][0]; Me.innerHTML=ga[i%ga.length][1];i++; setTimeout("Show()",spd); }
window.onload=Show;
//myscriptB.js の内容です。

var n=0,i=0;
//★画像とコメントの同時指定。増減可能。["画像","コメント"]; の2個をこの順番で記述。コメントにタグ使用の時は「"」ではなく「'」を使用
var gaa= new Array;
gaa[n++]=["b1.jpg","ひまわり きれいです"];
gaa[n++]=["b2.jpg","ひまわり2 きれいです"];
gaa[n++]=["b3.jpg","ひまわり3もきれい"];
gaa[n++]=["b4.jpg","ひまわり4 風にゆれてる"];
gaa[n++]=["b5.jpg","ひまわり5 この世界はほんとうに<span style='color:red;'>きれい</span>です"];

var myurl="";      //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分
var spd=3000;     //★画像切替時間 1000=1秒

function Show(){ Gaa.src=myurl+gaa[i%gaa.length][0]; Mea.innerHTML=gaa[i%gaa.length][1];i++; setTimeout("Show()",spd); }
window.onload=Show;




  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

パッと見たところ、myscriptA.js と myscriptB.jsで
var n=0,i=0;
var myurl="";      //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分
var spd=3000;     //★画像切替時間 1000=1秒
function Show()
が同じ記述になっています。

HTML中の
    <script type="text/javascript" src="myscriptA.js"></script>
    <script type="text/javascript" src="myscriptB.js"></script>
という記述はHTMLに直接javascriptを記述しているのと同じなので、
スコープが重複しているため、前者の記述を後者の記述が打ち消しています。
javascriptのスコープ

ga と gaaの様に重複しないように変数・関数名を変えるか、show()を引数にidを受け取って処理を行えるようにするなどの方法があります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/11/03 16:16

    ご指摘頂いた、
    var n=0,i=0;
    var myurl=""; //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分
    var spd=3000; //★画像切替時間 1000=1秒
    function Show()
    が同じ記述になっていたので、変数・関数名を変えるかえましたが、うまく動きませんでした。

    show()を引数にidを受け取って処理を行えるようにするなどの方法とは、
    どのようにすればよろしいのでしょうか?
    検索したのですが、いいのがありません、初歩的な質問で申し訳ございません。
    また少し調べていると、myscriptA.jsとmyscriptB.jsファイルには、「window.onload」が入っており、複数記述するといけないと他のホームページに書いてありました。
    これも原因なのでしょうか?

    キャンセル

  • 2015/11/06 11:00

    tanat さん
    回答頂いたお礼を言うのを忘れていました。回答、ありがとうございました。
    変数名をすべて変更し、function Show() {中身}の中身を変更したら無事に動きました。
    また、onloadが複数ある場合も、動かなくなる原因もわかりましたので、その解決策を自己解決欄に書かせていただきます。
    もっともっと勉強が必要ですので、またの機会がありましたら、ご教授お願いします。
    ありがとうございました。

    キャンセル

check解決した方法

0

1.変数名の重複を避け、すべて違うものにする。
→myscriptA.jsとmyscriptB.jsファイルには、同じ変数名があったので、変更しました。

2.html内にのbodyタグに、javascriptの実行したい変数名(自分で設定したもの)をonload=のあとに続けてセミコロン(;)をいれて記入する

3.<head>内に、実行したいjavascript(できれば.jsファイル)を作成し、記入する。
これで、複数のjavascript(onloadが記入してあった場合)の不具合が回避できました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.09%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る