Servlet→jspへforwardしたArrayListをjsp側で画面クリック毎に一行ずつ出力したい

こんにちは。
現在、「Servlet⇔DBのデータ受け渡し」をテーマにした模擬プロジェクトでちょっとしたノベルゲームを作っています。開発環境はEclipseです。問題は以下の通りです。

分からないこと

Servlet→jspへ拡張for文で回してforwardしたArrayListをjsp側で画面クリック毎に一行ずつ出力する方法

実際のコード

今回焦点となるServletとjspのコードは以下の通りです。jsp,Servletの他にもDAO,dto用のファイルもありますが、今回の質問とは関係なさそうなので記載は割愛します。
DAOでDBとデータのやり取りをしたのち、ArrayListにデータを格納しております。その処理を以下のServletで呼び出している、という流れです。

java
1
2//CharChoiceServlet.java
3
4//省略
5
6try(app_novelGameDAO dao = new app_novelGameDAO())
7
8List<App_novelGame> settingList = dao.selectSettings(dto);
9
10for (App_novalGame ap : settingList) {
11
12   String currentid = ap.getCurrentId();
13   String background = ap.getBackground();
14   String dialogue = ap.getDialogue();
15   String chartype = ap.getCharType();
16   String charid = ap.getCharId();
17}
18
19RequestDispatcher disp = request.getRequestDispatcher("jsp/screen.jsp");
20disp.forward(request, response);
21
22} catch (Exception e) {
23   throw new ServletException(e);
24}
25
26//省略
27

html
1//screen.jsp
2
3<head>
4
5<%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c" %>
6
7</head>
8<body>
9<script type = "text/javascript">
10
11
12document.body.onclick = function () {
13
14//ここにどう記述すればいいかが分かりません
15
16}
17
18</script>
19
20<%-- 省略 --%>
21
22<div class = "background">
23  <input type = "image" name = "background" src = "/App_novelGame/img/${ background }.jpg"/>
24</div>
25
26<div class = "chartype">
27  <input type = "image" name = "chartype" src = "/App_novelGame/img/${ chartype }.png"/>
28</div>
29
30<div class = "dialogue-frame">
31  <input type = "image" name = "background" src = "/App_novelGame/img/frame.png"/>
32  <span><c:out value = "${ dialogue }"/></span>
33</div>
34
35<%-- 省略 --%>
36
37</body>
38
39

※currentid = キャラ毎のルートのid(例　A1→A2a→A3a..セーブデータ用に必要)
chartype = キャラの表情差分別の画像（画像のパスがそのまま動的に入る）
background = 背景の画像(同じく)
dialogue = セリフ（DBに直接入力されたもの）
charid = キャラのid（これをキーにAキャラが選ばれたらキャラID：AのストーリーをDBから取ってくる！という風にしている）

現段階では、リストの中身が一気に順序良く出力され、リストの最後の行の要素(AのストーリーであればAの最後のシーン)が画面上で目視できる状態です。

今のところ、screen.jsp側でjavascriptを使って画面クリック時に何らかの処理をしてタイトルの機能を実装しようと考えております。がしかし、皆目見当もつかず、です。

最終的には、紙芝居のようにscreen.jspでクライアント側が画面クリックする毎にリストの中の次のシーンに切り替わるようにしたいです。

他に足りない情報などございましたらお申しつけください。

力を貸していただける方、お待ちしております。
宜しくお願い致します。

追記（euledgeさんのご回答へのレスポンス）

html
1//screen.jsp
2
3<div id = "settings">
4
5          <div class="screen" id="1">
6
7
8			<div class="background">
9				<input type="image" name="background"
10					src="/App_novelGame/img/${background}.jpg" />
11			</div>
12
13
14			<div class="charimage">
15				<input type="image" name="charimg"
16					src="/App_novelGame/img/${chartype}.png" />
17			</div>
18
19			<div class="dialogue-frame">
20				<input type="image" src="/App_novelGame/img/frame.png" /> <span><c:out
21						value="${dialogue}" /></span>
22			</div>
23
24		</div>
25
26		<div class="screen" id="2">
27
28
29			<div class="background">
30				<input type="image" name="background"
31					src="/App_novelGame/img/${background}.jpg" />
32			</div>
33
34
35			<div class="charimage">
36				<input type="image" name="charimg"
37					src="/App_novelGame/img/${chartype}.png" />
38			</div>
39
40			<div class="dialogue-frame">
41				<input type="image" src="/App_novelGame/img/frame.png" /> <span><c:out
42						value="${dialogue}" /></span>
43			</div>
44
45		</div>
46
47		<div class="screen" id="3">
48
49
50			<div class="background">
51				<input type="image" name="background"
52					src="/App_novelGame/img/${background}.jpg" />
53			</div>
54
55
56			<div class="charimage">
57				<input type="image" name="charimg"
58					src="/App_novelGame/img/${chartype}.png" />
59			</div>
60
61			<div class="dialogue-frame">
62				<input type="image" src="/App_novelGame/img/frame.png" /> <span><c:out
63						value="${dialogue}" /></span>
64			</div>
65
66		</div>
67<%-- 以下省略 --%>
68
69</div>
70
71
72
73コード

javascript
1
2let current_screen_no = 1;
3		let screens = document.getElementsByClassName("screen");
4		let screen_num = screens.length;
5		display_screen(1);
6
7		// スクリーン切り替えの処理
8		function display_screen(screen_no) {
9			Array.prototype.forEach.call(screens, function(screen) {
10				if (Number(screen.id) === screen_no) {
11					screen.style.display = "block";
12				} else {
13					screen.style.display = "none";
14				}
15			});
16			current_screen_no = current_screen_no + 1;
17		}
18
19		document.body.addEventListener('click', function(mEvent) {
20			if (current_screen_no <= screen_num) {
21				display_screen(current_screen_no);
22			}
23		}, true);
24
25
26
27コード

退会済みユーザー

2018/05/26 09:58

https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1245267102

anopurihana

2018/05/26 15:57

game-overさん　ありがとうございます。参考にさせていただきます。

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

回答2件

画像をボタンで入れ替えたいのであれば、jQueryのスライダープラグイン使われては？

2018年も手軽で便利なjQueryスライダープラグイン9選

投稿2018/05/27 01:30

m.ts10806

総合スコア80850

anopurihana

2018/05/27 01:40

mts10806さんご回答ありがとうございます。 slickというプラグインを試してみます。

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

ベストアンサー

全体表示したものに対して、行単位に style="display=none" の制御をしてあげればよいのかと思います。

実装例ということで、書いてみました。

html
1<body>
2<div id="settings">
3  <!-- currentidには 1,2,3などが入っている想定 -->
4  <div class="screen" id="1">
5    ああああああ
6    <div class="background"></div>
7    <div class="chartype"></div>
8    <div class="dialogue-frame"></div>
9  </div>
10
11  <div class="screen" id="2">
12    いいいいいいい
13    <div class="background"></div>
14    <div class="chartype"></div>
15    <div class="dialogue-frame"></div>
16  </div>
17
18  <div class="screen" id="3">
19    ううううううう
20    <div class="background"></div>
21    <div class="chartype"></div>
22    <div class="dialogue-frame"></div>
23  </div>
24</div>
25</body>

js
1let current_screen_no = 1;
2let screens = document.getElementsByClassName("screen");
3let screen_num = screens.length;
4display_screen(1);
5
6// スクリーン切り替えの処理
7function display_screen(screen_no) {
8  Array.prototype.forEach.call(screens, function(screen){
9    if (Number(screen.id) === screen_no) {
10      screen.style.display = "block";
11    } else {
12      screen.style.display = "none";
13    }
14  });
15  current_screen_no = current_screen_no + 1;
16}
17
18document.body.addEventListener('click',function(mEvent){
19  if (current_screen_no <= screen_num){
20    display_screen(current_screen_no);
21  }
22},true);

【動くサンプル】
https://jsfiddle.net/euledge/4r5cft7d/

投稿2018/05/26 12:28

編集2018/05/26 23:46

euledge

総合スコア2404

anopurihana

2018/05/26 15:56

euledgeさんご回答ありがとうございます。仰ることを理解できているか怪しいので、eulegdeさんならどのようにコードを書くか例示していただけると助かります。 display:none;を使ってリストの中で表示したい行以外の要素の存在を画面上から除外してしまう、ということだとは思うのですが..。お手数おかけしますが、よろしくお願いします。

anopurihana

2018/05/27 01:07

euledgeさんご丁寧にコードを載せてくださり、ありがとうございます。その後、javascriptのコードはそのまま拝借し、htmlも参考にしつつ上記のようなコードで一度試してみました。しかし、依然出力されるのは最後のシーンであって、まだcss＆javascriptの制御が効いていないように思われます。

anopurihana

2018/05/27 01:34

試しに以下のようにして、セリフ枠にどの文字が出力されるのか確かめてみました。 <div class="dialogue-frame"> <input type="image" src="/App_novelGame/img/frame.png" /> <span><c:out value="${dialogue}" /><c:out value ="各screenのid毎に違う文字を入れる"/></span> すると、各idのセリフ枠に書いたすべて文字が重なって出力されました。もし制御が効いていれば、最後のidのscreenに記入した文字のみが出てくるはずですが、これは制御がどうしてか効いていないことを暗示していると思いました。

anopurihana

2018/05/27 02:10

連投失礼いたします。 <div class="dialogue-frame"> <input type="image" src="/App_novelGame/img/frame.png" /> <span><c:out value="${dialogue}" />あいうえお</span> このように<c:out ~/>の記述を普通のhtmlの記述に変えても、依然全てのスクリーンのコメントが重なって出力されています。例えば、cssの記述が何らかの形で邪魔をしているということは想定されますか？

euledge

2018/05/27 06:37

関係するとすれば dialogue-frame でしょうか? それについてのcssの記述などがないので想像でしかないですが... ブラウザのデバッグツールなどでどのようなHTMLになっているのか確認をしてみてはいかがでしょうか? Chrome ,Firefox, IE それぞれデバッグツールがあると思います。当方Windowsなのでsafari環境は不明です。

anopurihana

2018/05/27 09:41

euledgeさんご返事ありがとうございます。確認してみます。ちなみに、関係のなさそうなヘッダー部分でdisplay:none;の切り替えを行っている箇所があるのですが、こうした記述がダブってしまって干渉している可能性はあるのでしょうか？（スクリーン部分はメインコンテンツ）

euledge

2018/05/27 23:28

コード見ていないので、「あるかもね」とぐらいしかお答えできません。

anopurihana

2018/05/30 02:30

euledgeさんこちらの手違いで、教えていただいたコードで実装できました。お知らせするのが遅くなって申し訳ありません。ご協力ありがとうございました。

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

あなたの回答