文字列とセットにした画像をクリックによりランダムに表示させたい

前提・実現したいこと

殆どコピペに頼っている初心者ですが、よろしくお願いいたします

・画像をクリックするたびに要素の表示・非表示の動作が発生し数秒後もとの状態に戻る
・クリックで表示される画像と文字列がセットになったものは数パターンあり、ランダムに表示される

上記のような遊びのページを作ろうとしています

発生している問題・エラーメッセージ

切り替え用画像が表示されず（非表示マークが出ている）
画像とセットで表示されるようにした文字列も切り替え用画像を表示させるタイミングで消えてしまう

net::ERR_FILE_NOT_FOUND
Image (async)
(anonymous) @ script.js:49
dispatch @ jquery.min.js:2
v.handle @ jquery.min.js:2

jQuely

$(function() {

  // 画像をクリックしたら発動
  $('div.character').on('click', function() {
  
  // 要素の表示・非表示を切り替えてコメントを表示
  $('div.text').fadeIn(500);
  $('div.change').fadeIn(500);
  $('div.character').fadeOut(500);
  
  // 時間経過で要素の表示・非表示をもとに戻してコメントを非表示
  $('div.text').delay(4000).fadeOut(500);
  $('div.change').delay(4000).fadeOut(500);
  $('div.character').delay(4000).fadeIn(500);
 
  // リストアップ
  var elements = [
              ['コメントA', './img/a.png'],
              ['コメントB', './img/b.png'],
              ['コメントC', './img/c.png']
             ];

  // リストの数をチェックしてランダムに取得
  var randElm = elements[Math.floor(Math.random() * elements.length)];
  var randImg = elements[Math.floor(Math.random() * elements.length)];

  // 表示エリアにコメントを挿入
  $('div.word').html(randElm[0]);

  // 表示エリアに切り替え用画像を挿入
  var img = document.getElementById('change_image');
  img.src = 'randImg[1]';
  
  });
});

HTML

<div class="talk">
<div class="character"><img src="./img/normal.png"></div>
<div class="change"><img src="./img/a.png" id="change_image"></div>
<div class="text"><div class="wordbox"><div class="word"></div></div></div>
</div>

試したこと

// リストの数をチェックしてランダムに取得（の切り替え用画像部分）
var randImg = elements[Math.floor(Math.random() * elements.length)];

// 切り替え用画像を表示させる（の全ての記述）
var img = document.getElementById('change_image');
  img.src = 'randImg[1]';

上記を削除すると、ランダムにはならないものの画像自体は表示される（HTMLで指定しているため）ので
jQuelyの切り替え画像に関する部分の記述に問題があるのかな？と思っているのですが、具体的にどう書き換えればいいのかがわかりません

切り替え用の画像が表示されないが故に挙動がおかしくなっているようなので
単純に画像パスの記述ミスかとも思ったのですが、前述の通りHTMLで指定した画像は表示されるので
そちらは間違っていないように感じます
（一応補足すると、HTMLと同じ階層に画像フォルダをつくり、その中に画像を入れています）

どうかご教示願います

kuma_kuma_

2020/09/18 23:46

1. JQueryのバージョンを教えてください 2. 画像とメッセージはセットですか別々ですか？ 3. 前回同じメッセージまたは画像が出てもOKですか？

bennys

2020/09/19 03:24 編集

1.JQueryのバージョンは3.5.1です 2.画像とメッセージはセットですコメントAが表示されるときには必ず画像A（./img/a.png）が表示されるようにしたいです 3.前回と同じセット（メッセージ＋画像）が表示されてもOKですどのセットが表示されるかは毎クリック完全にランダムで、何度クリックしても次に何が表示されるかな？と楽しめるページにしたいですよろしくお願いいたします

行動規範の内容に同意します

回答3件

書き直してみました
※スタイルシートの記載が無かったので勝手に設定しています。
変更よろしくお願いします。

アニメーション処理もなされたい様子だったので
参考になるサイトの記述をベースにしています。
jQueryで簡単にできる！アニメーションやスライドショーの作り方
他のアニメーションなどの動きなどに変更されたい場合参考にしやすきかと思います

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<style type="text/css">
6body {
7	text-align:center;
8}
9.character img{
10	width: 370px;
11	margin: auto;
12	height: 370px;
13	display: none;
14}
15.wordbox div{
16	width: 370px;
17	margin: auto;
18	height: 20px;
19	display: none;
20}
21</style>
22<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
23<script type="text/javascript">
24$(function() {
25	// 参考にした処理
26	// https://www.sejuku.net/blog/103061
27	// リストアップ
28	var elements = [
29	          ['', 'normal.png'],
30	          ['コメントA', 'a.png'],
31	          ['コメントB', 'b.png'],
32	          ['コメントC', 'c.png']
33	         ];
34	// 画像とメッセージを追加
35	for(var i = 0; i < elements.length; i ++){
36		$('div.character').append('<img src="' + elements[i][1] + '">');
37		$('div.wordbox').append('<div>' + elements[i][0] + '</div>');
38	}
39	const images = $('.character img');
40	const messages = $('.wordbox div');
41	let counter = 0;
42	let index = 0;
43
44	// 始めの画像とメッセージを表示
45	images.eq(index).css('display', 'block');
46	messages.eq(index).css('display', 'block');
47
48	// 画像をクリックしたら発動
49	$('div.character').on('click', function() {
50
51		// 画像、メッセージのフェードアウト
52		images.eq(index).css('display', 'none').fadeOut(500);
53		messages.eq(index).css('display', 'none').fadeOut(500);
54
55		// リストの数をチェックしてランダムに取得(1からなので初期表示画像は選ばれない)
56		var counter = Math.floor( Math.random() * (elements.length - 1) ) + 1;
57		index = counter % images.length;
58
59		// 画像、メッセージのフェードイン
60		images.eq(index).fadeIn(500);
61		messages.eq(index).fadeIn(500);
62
63	});
64});
65</script>
66</head>
67<body>
68<div class="talk" style="background-color: #f0f0f0; width: 400px; height: 410px;">
69	<div class="character" style="background-color: #C8C8C8; width: 380px; height: 380px; margin: auto;">
70	</div>
71	<div class="text">
72		<div class="wordbox">
73		</div>
74	</div>
75</div>
76</body>
77</html>

投稿2020/09/19 04:45

kuma_kuma_

総合スコア2506

bennys

2020/09/19 16:15

ご回答いただいたものをもとに書き直してみたのですが CSSの記述が干渉しているのか、思うように動作しませんでした今回は私の未熟さや勉強不足（CSSのどの部分を書き換えればよいかわからない）から残念ながらこちらの記述をもとにページを作成するのを断念いたしましたが汎用性がありフェードイン・アウトもスムーズで、たいへん魅力的なので別件で似たような動作をさせたい場合は参考にさせていただきたいと思います丁寧に教えていただき、ありがとうございました！

kuma_kuma_

2020/09/19 16:25

基本CSSでの影響はないはずです先に書いたHTML原文で動きはしましたか？ var elements = [ ['', 'normal.png'], ['コメントA', 'a.png'], ['コメントB', 'b.png'], ['コメントC', 'c.png'] ]; ここの画像URLは質問者様の環境に合わせて変更が必要ですが調整しましたか？それでも動かない場合状況を教えてください。あと質問者様にあるCSSを適応する場合 <div class="talk" style="background-color: #f0f0f0; width: 400px; height: 410px;"> <div class="character" style="background-color: #C8C8C8; width: 380px; height: 380px; margin: auto;"> ２か所で指定しているstyleの内容を削除してみて下さい。

bennys

2020/09/20 07:22 編集

画像URLの書き換えとCSSのスタイルの削除を試みましたが、やはり上手く動作しません長くなりますがよろしくお願いいたします状況としては、 ■読み込み時中央表示されるはずの要素が左に寄っている <div class="talk"> <div class="character" style="position: relative; top: 100px;"> <img src="./img/normal.png" style="display: block;"> <img src="./img/a.png"> <img src="./img/b.png"> <img src="./img/c.png"> </div> <div class="text" style="position: relative; top: -650px;"> <div class="wordbox"> <div style="display: block;"></div> <div>コメントA</div> <div>コメントB</div> <div>コメントC</div> </div> </div> </div> ■画像（"<img src="./img/normal.png">"）をクリック・<img src="./img/normal.png">が非表示となると同時に <img src="./img/normal.png">が表示されていた場所に<img src="./img/a.png">が表示されその隣の空いたスペースに<img src="./img/b.png">が表示される・コメントが表示されない <div class="talk"> <div class="character" style="position: relative; top: 100px;"> <img src="./img/normal.png" style="display: none;"> <img src="./img/a.png"> <img src="./img/b.png"> <img src="./img/c.png"> </div> <div class="text" style="position: relative; top: -650px;"> <div class="wordbox"> <div style="display: none;"></div> <div>コメントA</div> <div>コメントB</div> <div>コメントC</div> </div> </div> </div> ■画像（<img src="./img/a.png">）をクリック・<img src="./img/a.png">が非表示となると同時に <img src="./img/a.png">が表示されていた場所に<img src="./img/b.png">が表示され、 <img src="./img/b.png">が表示されていた場所に<img src="./img/c.png">が表示される・コメントは表示されるが、コメントB、コメントCが同時に表示される（中央・同じ枠内） <div class="talk"> <div class="character" style="position: relative; top: 100px;"> <img src="./img/normal.png" style="display: none;"> <img src="./img/a.png" style="display: none;"> <img src="./img/b.png"> <img src="./img/c.png"> </div> <div class="text" style="position: relative; top: -650px;"> <div class="wordbox"> <div style="display: none;"></div> <div style="display: none;">コメントA</div> <div>コメントB</div> <div>コメントC</div> </div> </div> </div> ︙ ★きりがないので割愛しますが、下記のようにある一つのセット以外すべてが【style="display: none;"】の状態にならない限り、何度クリックしてもずっとコメントと画像が2つずつ表示されたままになります（例）の状態であればコメントも画像も1つずつ指定した中央に表示されますし、また、この状態になりさえすれば、その後はきちんとクリックでランダムに切り替わります（再読み込みでまた振り出しに戻りますが…）（例） <div class="talk"> <div class="character" style="position: relative; top: 100px;"> <img src="./img/normal.png" style="display: none;"> <img src="./img/a.png" style="display: none;"> <img src="./img/b.png"> <img src="./img/c.png "style="display: none;"> </div> <div class="text" style="position: relative; top: -650px;"> <div class="wordbox"> <div style="display: none;"></div> <div style="display: none;">コメントA</div> <div>コメントB</div> <div style="display: none;">コメントC</div> </div> </div> </div> ------------------- 記述は下記のとおりです ※本来はHTML・jQuelyにモーダルウィンドウの記述がありますが無関係と判断しここには記入していません ▼HTMLここから <body> <div id="contents"> <div class="talk"> <div class="character"> </div> <div class="text"> <div class="wordbox"> </div> </div> </div> </div> </body> ▲HTMLここまで ▼CSSここから #contents{ width: 750px; height: 1080px; margin: auto; background-image: url(./img/kabegami.png); text-align:center; } /* 画像表示エリア */ .character { z-index: 5; } /* テキスト表示エリア */ .text { text-align: center; z-index: 10; } .wordbox { position: relative; display: inline-block; padding: 20px; border-radius: 45px; border: 2px solid #000000; } .wordbox:before { content: ''; position: absolute; display: block; width: 0; height: 0; left: 40px; top: -12px; border-right: 15px solid transparent; border-bottom: 15px solid #000000; border-left: 15px solid transparent; } .wordbox:after { content: ''; position: absolute; display: block; width: 0; height: 0; left: 40px; top: -12px; border-right: 15px solid transparent; border-bottom: 15px solid #000000; border-left: 15px solid transparent; } ▲CSSここまで ▼jQuelyここから $(function() { // リストアップ var elements = [ ['', './img/normal.png'], ['コメントA', './img/a.png'], ['コメントB', './img/b.png'], ['コメントC', './img/c.png'] ]; // 画像とメッセージを追加 for(var i = 0; i < elements.length; i ++){ $('div.character').append('<img src="' + elements[i][1] + '">'); $('div.wordbox').append('<div>' + elements[i][0] + '</div>'); } const images = $('.character img'); const messages = $('.wordbox div'); let counter = 0; let index = 0; // 始めの画像とメッセージを表示 images.eq(index).css('display', 'block'); messages.eq(index).css('display', 'block'); // 画像をクリックしたら発動 $('div.character').on('click', function() { // 画像、メッセージのフェードアウト images.eq(index).css('display', 'none').fadeOut(500); messages.eq(index).css('display', 'none').fadeOut(500); // リストの数をチェックしてランダムに取得(1からなので初期表示画像は選ばれない) var counter = Math.floor( Math.random() * (elements.length - 1) ) + 1; index = counter % images.length; // 画像、メッセージのフェードイン images.eq(index).fadeIn(500); messages.eq(index).fadeIn(500); }); }); // 画像の表示位置を初期位置から変更 $(function () { $('div.character').offset(function(index, coords) { return { top: coords.top + 100, }; }); }); // コメントの表示位置を初期位置から変更 $(function () { $('div.text').offset(function(index, coords) { return { top: coords.top - 650, }; }); }); ▲jsここまで

行動規範の内容に同意します

ベストアンサー

typoでは？
img.src = 'randImg[1]';→img.src = randImg[1];

投稿2020/09/19 02:34

Lhankor_Mhy

総合スコア36960

bennys

2020/09/19 16:19

ご指示いただいたとおりに書き換えてみたら動きました！ご指摘のとおり、記述でミスをしていたようですありがとうございました！ ※今回の質問における問題の解決に直結する回答となりますので、こちらをベストアンサーにさせていただきます

行動規範の内容に同意します

あとで他の処理と比較しやすい様にサンプルがある所から持ってきたのが
逆に判りずらくなったようです。
申し訳ございません。

修正を行いました。

JavaScript(jQuery)に関してはあくまで「判りやすくする為」に修正しているだけですので
基本変わりません。
HTML側は1点修正しています。
▲を表示されている事が判りましたが、そのままだと位置の調整が難しいので
別に<div>タグを用意してその中に表示し位置を決めれるようにしています。
※CSSファイルの指定だけお願いします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
6<script type="text/javascript">
7$(function() {
8	// 参考にした処理
9	// https://www.sejuku.net/blog/103061
10	// リストアップ
11	var elements = [
12	          ['', './img/normal.png'],
13	          ['コメントA', './img/a.png'],
14	          ['コメントB', './img/b.png'],
15	          ['コメントC', './img/c.png']
16	         ];
17	// 画像とメッセージを追加
18	for(var i = 0; i < elements.length; i ++){
19		$('div.character').append('<img src="' + elements[i][1] + '" style="display: none;">');	// 判りやすくする為に修正
20		$('div.wordbox').append('<div style="display: none;">' + elements[i][0] + '</div>');	// 判りやすくする為に修正
21	}
22	const images = $('.character img');
23	const messages = $('.wordbox div');
24	let counter = 0;
25	let index = 0;
26
27	// 始めの画像とメッセージを表示
28	images.eq(index).css('display', 'inline');
29	messages.eq(index).css('display', 'inline');
30
31	// 画像をクリックしたら発動
32	$('div.character').on('click', function() {
33
34		// 画像、メッセージのフェードアウト
35		images.eq(index).css('display', 'none').fadeOut(500);
36		messages.eq(index).css('display', 'none').fadeOut(500);
37
38		// リストの数をチェックしてランダムに取得(1からなので初期表示画像は選ばれない)
39		var counter = Math.floor( Math.random() * (elements.length - 1) ) + 1;
40		index = counter % images.length;
41
42		// 画像、メッセージのフェードイン
43		images.eq(index).fadeIn(500);
44		messages.eq(index).fadeIn(500);
45
46	});
47});
48</script>
49</head>
50<body>
51<div id="contents">
52	<div class="talk" >
53		<div class="character" >
54		</div>
55		<div class="text">
56			<div class="triangle"></div><!-- 三角形表示用に追加 -->
57			<div class="wordbox">
58			</div>
59		</div>
60	</div>
61</div>
62</body>
63</html>

▲を<div>タグに移したため内容に変更がございます。
変更内容はコメントをご覧ください。

CSS
1#contents{
2	width: 750px;
3	height: 1080px;
4	margin: auto;
5	background-image: url(./img/kabegami.png);
6	text-align:center;
7}
8
9/* 画像表示エリア */
10.character {
11	z-index: 5;
12}
13
14/* テキスト表示エリア */
15.text {
16	top: -16px;				/* 位置調整(上方向)  */
17	text-align: center;
18	z-index: 10;
19}
20
21.wordbox {
22	position: relative;
23	display: inline-block;
24	padding: 20px;
25	border-radius: 45px;
26	border: 2px solid #000000;
27	width: 200px;			/* 文字の内容で幅が変わってしまうので幅を指定して下さい */
28	height: 24px;			/* 文字が無いと高さが変わってしまうので高さを指定して下さい */
29}
30
31/* 三角表示 */
32.triangle {
33	position: relative;		/* 移動するときの基準が元いた位置から */ 
34	top: -8px;			/* 位置調整(上方向)  */
35	width: 30px;			/* 三角の正確な幅(これが無いと中央寄せできない) */ 
36	margin-left: auto;		/* 左右中央寄せ */
37	margin-right: auto;		/* 左右中央寄せ */
38}
39
40/* 三角表示の位置大きさの指定は表示している".triangle"に移動
41こちらからは削除 */
42.triangle:before {
43	content: '';
44	position: absolute;
45	display: block;
46	border-right: 15px solid transparent;
47	border-bottom: 15px solid #000000;
48	border-left: 15px solid transparent;
49}
50/* 三角表示の位置大きさの指定は表示している".triangle"に移動
51こちらからは削除 */
52.triangle:after {
53	content: '';
54	position: absolute;
55	display: block;
56	border-right: 15px solid transparent;
57	border-bottom: 15px solid #000000;
58	border-left: 15px solid transparent;
59}
60.character img{
61	margin: auto;	/* <img>タグを中央位置にしています。 */
62}
63.wordbox div{
64	margin: auto;	/* テキストを表示している<div>タグを中央位置にしています。 */
65}

投稿2020/09/20 13:53

kuma_kuma_

総合スコア2506

bennys

2020/09/23 13:54

コピペして位置調整してみたら画像が一つになりました！　ありがとうございます！ただ、うまくフェードイン・アウトするようになったのはいいのですが、3点ほど思うようにいかなくて困っていることがあります。 1.クリックした数秒後に差し替え後の画像とテキストが表示されている状態からもとに（最初の画像（./img/normal.png）とテキストが入っていない状態）に戻したいです。現状ですと、クリックすると差し替え後の画像のままで止まってしまい、再度画像をクリックするまで画像と文言が変わりません。 .delay().fadeIn()と.delay().fadeOut()をつかえばいけるかなと思ったのですが下記の記述では前回と同じで画像が2つ表示されてしまい、うまくいきませんでした。 // 画像、メッセージのフェードアウト images.eq(index).css('display', 'none').fadeOut(500).delay(4600).fadeIn(500); messages.eq(index).css('display', 'none').fadeOut(500).delay(4600).fadeIn(500); // 画像、メッセージのフェードイン images.eq(index).fadeIn(500).delay(4000).fadeOut(500); messages.eq(index).fadeIn(500).delay(4000).fadeOut(500); 2.最初の画像を表示しているときに▲のマークと文言表示エリアが表示されていて少し不格好なので非表示にしたいです。 CSSで.textや.wordboxにdispiay:noneを追加すると、全くの非表示になってしまいました。 3.リストのテキスト内容を本来表示させようとしている長め文章に書き換えたところ改行のために記入している「/r/n」がそのまま表示され改行もされないようですが複数行のテキストは入力できない仕様なのでしょうか？重ねてのお願い・質問になりますがよろしくお願いいたします。

kuma_kuma_

2020/09/23 14:37

> クリックした数秒後に差し替え後の画像とテキストが表示されている状態からもとに >（最初の画像（./img/normal.png）とテキストが入っていない状態）に戻したいです。ボタンを押された後以下の処理を行う必要があります。一定時間後に処理を行う(setTimeout) https://www.javadrive.jp/javascript/window/index2.html ただランダムに繰り返し変わるので変わった時に実行予約をキャンセルする必要があります。 2. はじめは書かれている通りCSSでdispiay:noneにして非表示にしておきます。あとはクリックしたとき文字を表示するタイミングで messages.eq(index).css('display', 'block'); ※▲のマークにも同じ処理を入れてください。として下さい。 3. この場合HTMLの改行なので'<br>'です。

行動規範の内容に同意します

あなたの回答