クリック時に画像の表示を切り替える

前提

jsの入門書でカスタムデータ属性を学んでいます。

実現したいこと

画像をクリックするとその画像を大きく表示させるようにしたいです。

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

これが初期の状態で他の画像をクリックしたら大きく表示させたいのですが、下のようになってしまいます。

疑問

お手本の画像をクリックしても画像が変わらなかったのですが、なぜでしょうか...

該当のソースコード

HTML
1<!doctype html>
2<html>
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width,initial-scale=1">
7    <title>テンプレート</title>
8    <link href="../../_common/images/favicon.ico" rel="shortcut icon">
9    <link href="https://fonts.googleapis.com/css?family=M+PLUS+1p:400,500" rel="stylesheet">
10    <link href="../../_common/css/style.css" rel="stylesheet">
11
12    <style>
13        section img {
14            max-width: 100%;
15        }
16
17        .center {
18            margin: 0 auto 0 auto;
19            max-width: 90%;
20            width: 500px;
21        }
22
23        ul {
24            display: flex;
25            margin: 0;
26            padding: 0;
27            list-style-type: none;
28        }
29
30        li {
31            flex: 1 1 auto;
32            margin-right: 8px;
33        }
34
35        li:last-of-type {
36            margin-right: 0;
37        }
38    </style>
39
40
41</head>
42
43<body>
44    <header>
45        <div class="container">
46            <h1>タイトル</h1>
47            <h2>サブタイトル</h2>
48        </div><!-- /.container -->
49    </header>
50    <main>
51        <div class="container">
52            <section>
53
54                <div class="center">
55                    <div>
56                        <img src="./images/img1.jpg" id="bigimg">
57                    </div>
58
59                    <ul>
60                        <li> <img src="./images/thumb-img1.jpg" class="thumb" data-image="img1.jpg"></li>
61                        <li> <img src="./images/thumb-img2.jpg" class="thumb" data-image="img2.jpg"></li>
62                        <li> <img src="./images/thumb-img3.jpg" class="thumb" data-image="img3.jpg"></li>
63                        <li> <img src="./images/thumb-img4.jpg" class="thumb" data-image="img4.jpg"></li>
64
65                    </ul>
66                </div>
67
68            </section>
69        </div><!-- /.container -->
70    </main>
71    <footer>
72        <div class="container">
73            <p>JavaScript Samples</p>
74        </div><!-- /.container -->
75    </footer>
76    <script>
77        'use strict';
78
79        const thumbs = document.querySelectorAll('.thumb');
80
81        thumbs.forEach(function(item, index) {
82            item.onclick = function () {
83                document.getElementById('bigimg').src = this.dataset.image;
84            }
85
86        });
87
88    </script>
89
90
91</body>
92
93</html>

お手本

HTML
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width,initial-scale=1">
6<title>5-04_image</title>
7<link href="../../_common/images/favicon.ico" rel="shortcut icon">
8<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p:400,500" rel="stylesheet">
9<link href="../../_common/css/style.css" rel="stylesheet">
10<style>
11section img {
12    max-width: 100%;
13}
14.center {
15    margin: 0 auto 0 auto;
16    max-width: 90%;
17    width: 500px;
18}
19ul {
20    display: flex;
21    margin: 0;
22    padding: 0;
23    list-style-type: none;
24}
25li {
26    flex: 1 1 auto;
27    margin-right: 6px;
28}
29li:last-of-type {
30    margin-right: 0;
31}
32</style>
33</head>
34<body>
35<header>
36<div class="container">
37<h1>イメージの切り替え</h1>
38<h2>画像を切り替える</h2>
39</div><!-- /.container -->
40</header>
41<main>
42<div class="container">
43<section>
44    <div class="center">
45        <div>
46            <img src="img1.jpg" id="bigimg">
47        </div>
48        <ul>
49            <li><img src="thumb-img1.jpg" class="thumb" data-image="img1.jpg"></li>
50            <li><img src="thumb-img2.jpg" class="thumb" data-image="img2.jpg"></li>
51            <li><img src="thumb-img3.jpg" class="thumb" data-image="img3.jpg"></li>
52            <li><img src="thumb-img4.jpg" class="thumb" data-image="img4.jpg"></li>
53        </ul>
54    </div>
55</section>
56</div><!-- /.container -->
57</main>
58<footer>
59<div class="container">
60<p>JavaScript Samples</p>
61</div><!-- /.container -->
62</footer>
63<script>
64'use strict';
65
66const thumbs = document.querySelectorAll('.thumb');
67thumbs.forEach(function(item, index) {
68    item.onclick = function() {
69    }
70    document.getElementById('bigimg').src = this.dataset.image;
71});
72</script>
73</body>
74</html>
75

試したこと

./imaegs/　を消してやってみましたが、そうするとそもそもの画像が表示されなくなりました。

m.ts10806

2022/09/28 02:48

解決された後で申し訳ないですが、明らかに本件と無関係の質問タグがあるのであとから参照する人が混乱しないためにも外しておいてもらえると。 https://teratail.com/tags/DataSet

m.ts10806

2022/09/28 02:49

data-*は「データ属性」のことでDataSetとはまた別のものです。 https://developer.mozilla.org/ja/docs/Learn/HTML/Howto/Use_data_attributes

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

回答2件

単純にサムネイルと実際の画像の置き場が違うのでは？
たとえばこう

html
1<img src="./images/thumb-img1.jpg" class="thumb" data-image="img1.jpg">
2↓↓↓
3<img src="./images/thumb-img1.jpg" class="thumb" data-image="./images/img1.jpg">

投稿2022/09/28 01:45

yambejp

総合スコア116810

ベストアンサー

srcプロパティに代入するとき、./images/ を足す必要があるのでは。
(または、data-image 属性値に ./images/ を足しておくか)

js
1document.getElementById('bigimg').src = './images/' + this.dataset.image;

投稿2022/09/28 01:44

編集2022/09/28 01:46

int32_t

総合スコア21756

Iori

2022/09/28 02:07

お二方ありがとうございます。ご指摘の通りdata-imageに./images/を付け足すと解決しました！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.35%

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

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

質問する

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

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

クリック時に画像の表示を切り替える

前提

実現したいこと

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

疑問

該当のソースコード

試したこと

関連した質問