クリックして、サムネイルからメインへ画像を切り替わる指示を出しましたが変わりません。

改善策を教えてください。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  
6    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
7  <title>イス画像練習</title>
8  <style>
9    @charset "utf-8";
10*{
11	margin:0;
12	padding:0;
13}
14body{
15	width:750px;
16	height: auto;
17    margin: 30px auto;
18}
19#gallery{
20    float: left;
21    margin-right: -150px;
22}
23.small-photo{
24    width: 20%;
25    height: 20%;
26    padding: 10px;
27}
28  </style>
29</head>
30<body>
31  <h1>オフィス家具屋</h1>
32  <p>価格に自信！役員用椅子（W670×D620×H965-1060）</p>
33  <hr>
34  <h2>役員用椅子（W670×D620×H965-1060）</h2>
35  <div id="gallery">
36    <div class="main"><img src="photo1/image1.jpg" alt="正面">
37      <p>正面</p>
38    </div>
39    <div class="thumb"><img src="photo1/image1.jpg" alt="正面" class="small-photo"> 
40        <img src="photo1/image2.jpg" alt="サイド" class="small-photo"> 
41    </div>
42  </div>
43<h3>商品案内</h3>
44  <p>重役タイプのチェアならでは重厚感を保ちながら、驚きのコストパフォーマンスを実現したマネージメントチェア。 </p>
45    <script>
46    $(function(){
47 $('.thumbnails img').click(function(){
48  var $thisImg = $(this).attr('src');
49  var $thisAlt = $(this).attr('alt');
50  $('.mainImage img').attr({src:$thisImg,alt:$thisAlt});
51 });
52});
53    
54    
55    </script>
56  </div>
57</body>
58</html>![![イメージ説明](2a50867b7c37ec77289537a1ef72dd45.jpeg)](aa62be690e4e55eaabe2b5678638767a.jpeg)

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

回答3件

ベストアンサー

ノード出現前に操作しようとしています。

投稿2019/06/19 02:37

x_x

総合スコア13749

ocha9

2019/06/19 03:06 編集

ご回答ありがとうございます。残念ですが、改善されません。今の時点のhtmlを書きます。 ``` <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="description" content="昇進,出世されたあなたに格別の椅子を最高級の座り心地を提供いたします。"> <meta name="keywords" content="役員用椅子,椅子,チェア,イス,オフィスチェア,役員用椅子,フカフカ,革"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="style3j.css" type="text/css"> <title>役員用椅子</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <body> <h1><img src="photo1/isui.png">オフィス家具のtm</h1> <p>価格に自信！役員用椅子（W670×D620×H965-1060）<br> 他社の価格やお見積もりと比べてください！ </p> <div id="nav"> <ul> <li><a href="#">オフィス家具のtm</a></li> >  <li><a href="#">オフィスチェア</a></li> >  <li><a href="#">マネージメントチェア(社長椅子・重役椅子)</a></li> >  <li>役員用椅子（W670×D620×H965-1060）</li> </ul> </div> <div class="clear"></div> <h2>役員用椅子（W670×D620×H965-1060）</h2> <div id="gallery"> <div class="main"><img src="photo/image1.jpg" alt="正面"> <p>正面</p> </div> <div class="thumb"><img src="photo/image1.jpg" alt="正面" class="small-photo"><img src="photo/image2.jpg" alt="サイド" class="small-photo"></div> </div> <div class="order"> <form> <table> <tr> <th class="rside">商品名</th> <td>役員用椅子（W670×D620×H965-1060）</td> </tr> <tr> <th class="rside">品番/型番</th> <td>GT-2410-BK</td> </tr> <tr> <th class="rside">標準価格</th> <td>オープン価格</td> </tr> <tr> <th class="rside">販売価格</th> <td><span class="price">￥8,000</span>(税込￥8,640)</td> </tr> <tr> <th class="rside">数量 <select name="order num"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> </select> </th> <td><input type="submit" value="注文する"></td> </tr> </table> </form> <h3>商品案内</h3> <p>重役タイプのチェアならでは重厚感を保ちながら、驚きのコストパフォーマンスを実現したマネージメントチェア。<br> 身体にフィットするシートが、着席者の腰から背中までを、優しく穏やかにサポートします。<br> マネージメントデスクや高級会議テーブルと合わせても、決して引けを取らない高級感溢れるデザインは、役員クラスのデスクワーク用途に最適です。<br> また、大切なお客様との商談に使う、ハイクラスなミーティングチェアとしても、相応しいのではないでしょうか。<br> 肘が疲れない様、ソフトレザーのクッションが付いた肘付きになっておりますので、常にリラックスした体勢で業務をこなすことができます。</p> </div> <script> window.addEventListener('DOMContentLoaded', function(e){ let album = [ {src: 'photo1/image1.jpg', msg: '正面'}, {src: 'photo1/image2.jpg', msg: 'サイド'} ]; // 最初のデータを表示しておく let mainImage = document.createElement('img'); mainImage.setAttribute('src', album[0].src); mainImage.setAttribute('alt', album[0].msg); let mainMsg = document.createElement('p'); mainMsg.innerText = mainImage.alt; let mainFlame = document.querySelector('#gallery .main'); // サムネイル画像の表示 let thumbFlame = document.querySelector('#gallery .thumb'); for (let i = 0; i < album.length; i++) { let thumbImage = document.createElement('img'); thumbImage.setAttribute('src', album[i].src); thumbImage.setAttribute('alt', album[i].msg); } // クリックした画像をメインにする thumbFlame.addEventListener('click', function(event) { if (event.target.src) { mainImage.src = event.target.src; mainMsg.innerText = event.target.alt; } }); }); </script> </body> </html> ``` エラーメッセージはかわらず、Failed to load resource: net::ERR_FILE_NOT_FOUNDが出ます。

x_x

2019/06/19 03:07

エラーが Failed to load resource: net::ERR_FILE_NOT_FOUND だったことはここで初めて知ったのですが、どこかに書いていたのでしょうか？このエラーは単に画像がないと言っているので、パスを確認してください。

ocha9

2019/06/19 10:18

すみません。訂正します。 Chrome DevToolsで確認したところ、エラーはなくなりました。しかし、しかし、クリックしても画像変更しません。これは、あとは、どこを直せばよいでしょうか？

x_x

2019/06/20 03:08

移動だけで動くようになります(変更前)。スクリプトを変更したようですが、わざわざ HTML にない class を指定して動かなくしているのはわたしには理解できません。

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

thumbFlameが「'addEventListener' of null」なら
thumbFlameがHTMLElementになるように調整するしかないです

追記

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(e){
3本文
4});
5</script>

してください

投稿2019/06/19 00:21

編集2019/06/19 00:51

yambejp

総合スコア114777

ocha9

2019/06/19 00:42

ご回答ありがとうございます。 thumbFlameがHTMLElementになるように調整するしかないです。大変申し訳ないですが、具体的にどうすればよろしいでしょうか？ thumbFlameが「'addEventListener' of null」→''の中に、HTMLElementを入れるということでよろしいでしょうか？

yambejp

2019/06/19 00:51 編集

追記しました

ocha9

2019/06/19 01:51

コード追加ありがとうございます。実はまだ解決していなくて、 Failed to load resource: net::ERR_FILE_NOT_FOUND Failed to load resource: net::ERR_FILE_NOT_FOUND Failed to load resource: net::ERR_FILE_NOT_FOUND となり、サムネイル表示できません。イスの画像２つと、アイコンのところにエラーがかかります。アイコンは、サムネイル表示は、希望していないのでいいですが、なぜ、画像が表示されるのに、サムネイルから大きい画面にならないか教えてください。

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

insertBeforeにnullが指定されているため
エラーになっています。

コードを書いて正しく動作しない場合は
Chrome DevToolsでエラーを確認しましょう。

投稿2019/06/18 15:00

yasutomi

総合スコア2937

ocha9

2019/06/18 22:20

ご指摘ありがとうございます。ただ、insertBeforeにnullを指定しているからということですが、null書いている行すべて削除しても変わりません。具体的に何をしていすればよろしいでしょうか？？あとChrome DevToolsで ```javascript thumbFlame.addEventListener('click', function(event) { --- エラーメッセージで --- Uncaught TypeError: Cannot read property 'addEventListener' of null --- nullのプロパティ「addEventListener」を読み取ることができませんとでます。この場合はどうしたらよいでしょうか。

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

あなたの回答