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

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

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2340閲覧

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

sakura123

総合スコア11

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2015/11/03 04:24

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

###ソースコード

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="GENERATOR" content="JustSystems Homepage Builder Version 19.0.7.0 for Windows"> 6 <meta http-equiv="Content-Script-Type" content="text/javascript"> 7 <link rel="stylesheet" href="mycss.css"> 8 <title>Javascriptの練習</title> 9 <script type="text/javascript" src="myscriptA.js"></script> 10 <script type="text/javascript" src="myscriptB.js"></script> 11</head> 12<body> 13 14 <div id="container"> 15 16 <div id="header"> 17 <h1><img src="l_246.jpg" height="100" width="600"></h1> 18 </div> 19 20 <div id="main"> 21 22 <div id="contents"> 23 <h1></h1> 24 <img src="a1.jpg" id="Ga" style=""> 25 <div id="Me" style="">雲 きれいです</div> 26 27 <script type="text/javascript" src="myscriptA.js"></script> 28 29 </div><!--#contents--> 30 31 <div id="sidebar"> 32 <h1>ひまわり</h1> 33 <img src="b1.jpg" id="Gaa" style=""> 34 <div id="Mea" style="">ひまわり きれいです</div> 35 36 <script type="text/javascript" src="myscriptB.js"></script> 37 38 </div><!--#sidebar--> 39 40 </div><!--main--> 41 42 <div id="footer">Copyright 2015,dotinstall.com</div> 43 44 </div><!--#container--> 45</body> 46</html> 47

css

1html{ 2 background-image: url('07.gif'); 3 height: 100%; 4} 5body{ 6 height: 100%; 7 font-family: Verdana,Arial; 8 font-size: 14px; 9} 10body > #container{ 11 height: auto; 12} 13 14#container{ 15 min-height:100%; 16 height: 100%; 17 width: 800px; 18 margin: 0 auto; 19 padding: 0 10px; 20 background-color: #fff; 21 box-shadow: 0 0 3px rgba(0,0,0,0.5); 22} 23#header{ 24 margin-bottom: 15px; 25} 26 27#main{ 28 overflow: hidden; 29} 30 31#contents{ 32 float: left; 33 width: 400px; 34} 35#sidebar{ 36 float: right; 37 width: 400px; 38} 39 40#footer{ 41 font-size: 12px; 42 color: #ccc; 43 text-align: center; 44 border-top: 1px solid #ccc; 45 padding: 10px 0 20px; 46} 47 48 /*★ここからコピー。画像とコメントの位置指定。#Gaと#Meは必須。好みで変更*/ 49 50#Ga{ 51 margin: 0px auto 0;/*★画像の中央位置指定(上 左右 下)*/ 52 width: 400px;/*★画像横幅*/ 53 height: 350px;/*★画像縦幅*/ 54 display: block;/*★ブロック要素指定。上記の中央位置指定を有効にする為*/ 55} 56#Me{ 57 margin: 5px auto;/*★コメントの中央位置指定(上下 左右)*/ 58 width: 400px;/*★コメントの横幅=画像の横幅。変更しても可*/ 59 border: 1px solid #ccc;/*★コメントの枠線 灰色*/ 60 padding: 3px 15px;/*★コメントの余白(上下 左右)*/ 61 box-sizing: border-box;/*★コメント領域内にパディング領域及びボーダー領域も含む*/ 62} 63#Gaa{ 64 margin: 0px auto 0;/*★画像の中央位置指定(上 左右 下)*/ 65 width: 400px;/*★画像横幅*/ 66 height: 350px;/*★画像縦幅*/ 67 display: block;/*★ブロック要素指定。上記の中央位置指定を有効にする為*/ 68} 69#Mea{ 70 margin: 5px auto;/*★コメントの中央位置指定(上下 左右)*/ 71 width: 400px;/*★コメントの横幅=画像の横幅。変更しても可*/ 72 border: 1px solid #ccc;/*★コメントの枠線 灰色*/ 73 padding: 3px 15px;/*★コメントの余白(上下 左右)*/ 74 box-sizing: border-box;/*★コメント領域内にパディング領域及びボーダー領域も含む*/ 75} 76 77

javascript

1//myscriptA.js の内容です。 2 3var n=0,i=0; 4//★画像とコメントの同時指定。増減可能。["画像","コメント"]; の2個をこの順番で記述。コメントにタグ使用の時は「"」ではなく「'」を使用 5var ga= new Array; 6ga[n++]=["a1.jpg","雲 きれいです"]; 7ga[n++]=["a2.jpg","雲多い きれいです"]; 8ga[n++]=["a3.jpg","虹もきれい"]; 9ga[n++]=["a4.jpg","コスモスは 風にゆれてる"]; 10ga[n++]=["a5.jpg","青い空 この世界はほんとうに<span style='color:red;'>きれい</span>です"]; 11 12var myurl=""; //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分 13var spd=3000; //★画像切替時間 1000=1秒 14 15function Show(){ Ga.src=myurl+ga[i%ga.length][0]; Me.innerHTML=ga[i%ga.length][1];i++; setTimeout("Show()",spd); } 16window.onload=Show; 17

javascript

1//myscriptB.js の内容です。 2 3var n=0,i=0; 4//★画像とコメントの同時指定。増減可能。["画像","コメント"]; の2個をこの順番で記述。コメントにタグ使用の時は「"」ではなく「'」を使用 5var gaa= new Array; 6gaa[n++]=["b1.jpg","ひまわり きれいです"]; 7gaa[n++]=["b2.jpg","ひまわり2 きれいです"]; 8gaa[n++]=["b3.jpg","ひまわり3もきれい"]; 9gaa[n++]=["b4.jpg","ひまわり4 風にゆれてる"]; 10gaa[n++]=["b5.jpg","ひまわり5 この世界はほんとうに<span style='color:red;'>きれい</span>です"]; 11 12var myurl=""; //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分 13var spd=3000; //★画像切替時間 1000=1秒 14 15function Show(){ Gaa.src=myurl+gaa[i%gaa.length][0]; Mea.innerHTML=gaa[i%gaa.length][1];i++; setTimeout("Show()",spd); } 16window.onload=Show; 17

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

HTML中の

HTML

1 <script type="text/javascript" src="myscriptA.js"></script> 2 <script type="text/javascript" src="myscriptB.js"></script> 3

という記述はHTMLに直接javascriptを記述しているのと同じなので、
スコープが重複しているため、前者の記述を後者の記述が打ち消しています。
javascriptのスコープ

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

投稿2015/11/03 06:49

tanat

総合スコア18706

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sakura123

2015/11/03 07:16

ご指摘頂いた、 var n=0,i=0; var myurl=""; //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分 var spd=3000; //★画像切替時間 1000=1秒 function Show() が同じ記述になっていたので、変数・関数名を変えるかえましたが、うまく動きませんでした。 show()を引数にidを受け取って処理を行えるようにするなどの方法とは、 どのようにすればよろしいのでしょうか? 検索したのですが、いいのがありません、初歩的な質問で申し訳ございません。 また少し調べていると、myscriptA.jsとmyscriptB.jsファイルには、「window.onload」が入っており、複数記述するといけないと他のホームページに書いてありました。 これも原因なのでしょうか?
sakura123

2015/11/06 02:00

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

0

自己解決

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

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

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

投稿2015/11/06 02:07

sakura123

総合スコア11

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問