[追加の質問]JSで格納させた画像を、クリックした際に別ページへ飛ぶようにするにはどうしたら良いでしょうか？

前提・実現したいこと

JS上で格納した画像をクリックしたら別ページへ飛ぶように設定をしたいです。
（それぞれの画像で異なるページへ飛ぶように設定したいです）
前回した質問と関連しています。勉強不足ですみませんが、ご教示ください。よろしくお願いいたします。

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

エラーメッセージ

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <title>Quiz</title>
8    <link rel="stylesheet" href="css/styles.css">
9</head>
10<body>
11    <h1>タイトル<br>タイトル</h1>
12    <div class="container">
13        <div id="question">
14        </div>
15        <ul id="answers">
16            <li></li>
17            <li></li>
18            <li></li>
19        </ul>
20        <div id="btn" class="disabled">次の問題に進む</div>
21        <div id="result">
22            <p>Score:3/3</p>
23            <a href="">もう一度挑戦する</a>
24        </div>
25    </div>
26    <script src=main.js></script>
27</body>
28</html>

CSS
1body{
2    font-size: 16px;
3    font-family: Verdana, sans-serif;
4}
5
6h1{
7    font-size: 25px;
8    text-align: center;
9}
10
11.container{
12    width:400px;
13    margin: 10px auto;
14    position: relative;
15}
16
17#question{
18    /* background:#cce5ff ;
19    color:#004085;
20    height: 40px;
21    border-radius: 4px;
22    padding: 10px;
23    margin-bottom: 10px; */
24    margin-bottom: 10px;
25    padding: 10px;
26    text-align: center;
27}
28#question img{
29    width: 500px;
30    height: 500px;
31}
32
33#answers{
34    list-style: none;
35    padding: 0;
36    margin: 0;
37}
38
39#answers > li{
40    border: 1px solid #ccc;
41    border-radius: 4px;
42    padding: 10px;
43    margin-bottom:10px;
44    text-align: center;
45}
46
47/* li:hoverには余白を開けない！ */
48#answers > li:hover {           
49    cursor: pointer;
50    background: #f8f8f8;
51}
52
53#btn,#result > a{
54    cursor: pointer;
55    background: #3498db;
56    border-radius: 4px;
57    padding: 10px;
58    text-align: center;
59    color: #fff;
60    box-shadow: 0 3px 0 #2880b9;
61}
62
63#btn .disabled{
64    opacity: 0.6;
65}
66
67#answers >li.correct{
68    background: #d4edda;
69    border-color:#c3e6cb;
70    color: #155724;
71    font-weight: bold;
72}
73
74#answers >li.wrong{
75    background: #f8d8da;
76    border-color:#f5c6cb;
77    color: #721c24;
78    font-weight: bold;
79}
80
81#result{
82    position: absolute;
83    /* top: 50px; */
84    top: -500px;
85    left: 0;
86    right: 0;
87    margin: 0 auto;
88    background: #fff;
89    width: 300px;
90    border-radius: 3px;
91    padding: 30px;
92    text-align: center;
93    box-shadow: 0 0 2px rgba(0,0,0,0.5);
94    transition: 0.4s ease-out;
95}
96
97#result > p{
98    font-size: 24px;
99}
100
101#result > a{
102    display: block;
103    text-decoration: none;
104    color: #fff;
105}
106
107#result.show{
108    top:50px;
109}

JS
1(function(){
2    'use stict';
3    let question=document.getElementById('question')
4    let btn=document.getElementById('btn')
5    let answers=document.querySelectorAll('#answers>li');
6    let result=document.getElementById('result')
7    let scoreLabel=document.querySelector('#result>p');
8
9    //選択しを画面表示前にシャッフル
10    let shuffledAnswers;
11
12     let img = new Array();
13     img[0] = new Image();
14     img[0].src="img/img1.png"
15     img[1] = new Image();
16     img[1].src="img/img2.png";
17     img[2] = new Image();
18     img[2].src="img/img3.png";
19     img[3] = new Image();
20     img[3].src="img/img4.png";
21     img[4] = new Image();
22     img[4].src="img/img5.png";
23     img[5] = new Image();
24     img[5].src="img/img6.png";
25
26    let quizSet=[
27        {q:img[0],a:['a','b','c']},
28        {q:img[1],a:['a','b','c']},
29        {q:img[2],a:['a','b','c']},
30        {q:img[3],a:['a','b','c']},
31        {q:img[4],a:['a','b','c']},
32        {q:img[5],a:['a','b','c']},
33       
34    ];
35
36    let currentNum=0;
37    let isAnswered;
38    let score = 0;
39
40    //フィッシャー・イェーツのシャッフルアルゴリズムを使い、問題をランダムに表示する
41    function shuffle(arr){
42        let i;
43        let j;
44        let tmp;
45        // iが配列の最後で、iが0以上である間、iをどんどん前にずらしていく
46        for(i=arr.length-1;i>=0;i--){
47            j=Math.floor(Math.random() *(i+1));
48            tmp=arr[i];
49            arr[i]=arr[j];
50            arr[j]=tmp;
51        }
52        return arr;
53    }
54
55    function setQuiz(){
56        let i;
57        //テキストコンテントに画像は挿入できない
58        // question.textContent=quizSet[currentNum].q;
59        // questionの要素の子を削除
60        Array.from(question.children).forEach(o => o.remove())
61        question.appendChild(quizSet[currentNum].q);
62
63        shuffledAnswers=shuffle(quizSet[currentNum].a.slice());
64        // answers[0].textContent=shuffledAnswers[0];
65        // answers[1].textContent=shuffledAnswers[1];
66        // answers[2].textContent=shuffledAnswers[2];
67        isAnswered = false;
68        for(i=0;i<answers.length;i++){
69            answers[i].classList.remove('correct');
70            answers[i].classList.remove('wrong');
71            answers[i].textContent=shuffledAnswers[i];
72        }
73        btn.classList.add('disabled');
74        // 最後のクイズの場合、nextではなく、「正答率を見る」を表示
75        if(currentNum === quizSet.length - 1){
76            btn.textContent='正答率を見る';
77        }
78
79    }
80
81    function setEvents(){
82        let i;
83        for(i=0;i<answers.length;i++){
84            answers[i].addEventListener('click',function(){
85                checkAnswer(this);
86            })
87        }
88        btn.addEventListener('click',function(){
89            if(this.classList.contains('disabled')){
90                return;
91            }
92            // setQuiz();
93            // 最終問題をといたらクイズを終わらせる
94            if(currentNum === quizSet.length){
95                // show score
96                // console.log('Score: ' + score + ' / ' + quizSet.length); 
97                scoreLabel.textContent='Score: ' + score + ' / ' + quizSet.length;
98                result.classList.add('show');               
99            }else{
100                // setQuiz
101                setQuiz();
102            }
103        })
104    }
105
106    function checkAnswer(node){
107        if(isAnswered){
108            return;
109        }
110        isAnswered=true;
111        if(node.textContent === quizSet[currentNum].a[0]){
112            // console.log("correct");
113            node.textContent+='....御名答!';
114            node.classList.add('correct');
115            score++;
116        }else {
117            // console.log("wrong");
118            node.textContent+='....おしい!';
119            node.classList.add('wrong');
120        }
121        // 次の問題へ移行する処理
122        btn.classList.remove('disabled');
123        currentNum++;
124    }
125
126    setQuiz();
127    setEvents();
128    
129})();
130
131

試したこと

let img = new Array();
img[0] = new Image();
img[0].src="img/img1.png"
の箇所で、html上でリンクをつける際にする、<a href=""></a>を試みました。
on.clickで書かないといけないのかな？と考えましたが、それぞれの画像で異なるページへ飛ばすにはどうしたら良いかわかりません。

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

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

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

回答1件

ベストアンサー

javascript
1// リンクの要素を作成します
2let a = document.createElement('a');
3a.href = "http://hogehoge.html";
4
5// 変更なし
6let img = new Array();
7img[0] = new Image();
8img[0].src="img/img1.png"
9
10// 画像をリンクの要素に入れます
11a.appendChild(img);
12// リンクをターゲットの要素に入れます
13target.appendChild(a);