ランダムで画像を表示し、その画像からURLに飛べるようにしたい

前提・実現したいこと

HTMLとJavascriptでボタンを押したら、ランダムに画像を表示し、その画像からURLに飛ぶサイトを作りたく思っています。

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

ですが、画像からURLに飛ぶコードがわかりません。
https://ohitoriprogram.hatenablog.jp/entry/2020/08/22/103507
こちらを参考にランダムに画像を表示するプログラムまでは書くことができました。
どうぞよろしくお願いいたします。

該当のソースコード

<div class ="Recommend1"> <h3 id="Recommend1">〇〇〇〇</h3> <div id ="result1"></div> <input type="button" value="くじを引く" id="bt1"/> <script> var target = document.getElementById( 'Recommend1' ); var bt = document.getElementById( 'bt1' ); bt.addEventListener( 'click', function( e ) { var imglist = [ 'images1.jpg','images2.jpg' ]; var selectnum = Math.floor(Math.random() * imglist.length); var element = '<img src="' + imglist[ selectnum ] + '" alt="" />'; result1.innerHTML = element; }, false );

       </script>

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

画像名とURLをセットで持つようにして、imgタグをaタグで囲ったらどうですか。

javascript
1        <script>
2            var target = document.getElementById( 'Recommend1' );
3            var bt = document.getElementById( 'bt1' );
4            bt.addEventListener( 'click', function( e ) {
5                var imglist = [
6                    ['images1.jpg', 'https://www.yahoo.co.jp/'],
7                    ['images2.jpg', 'https://www.youtube.com/']
8                ]
9                var selectnum = Math.floor(Math.random() * imglist.length);
10                var item = imglist[selectnum]
11                var element = '<a href="' + item[1] +'"><img src="' + item[0] + '" alt="" /></a>';
12                result1.innerHTML = element;
13            }, false );
14        </script>

(追記)
動作確認したソース丸ごと貼っておきます。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8</head>
9<body>
10    <div class="Recommend1">
11        <h3 id="Recommend1">〇〇〇〇</h3>
12        <div id="result1"></div>
13        <input type="button" value="くじを引く" id="bt1"/>
14        <script>
15            var target = document.getElementById( 'Recommend1' );
16            var bt = document.getElementById( 'bt1' );
17            bt.addEventListener( 'click', function( e ) {
18                var imglist = [
19                    ['images1.jpg', 'https://www.yahoo.co.jp/'],
20                    ['images2.jpg', 'https://www.youtube.com/']
21                ]
22                    
23                var selectnum = Math.floor(Math.random() * imglist.length);
24                var item = imglist[selectnum]
25                var element = '<a href="' + item[1] +'"><img src="' + item[0] + '" alt="" /></a>';
26                result1.innerHTML = element;
27            }, false );
28        </script>
29    </div>
30</body>
31</html>