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

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

ただいまの
回答率

87.37%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 729

score 15

 前提・実現したいこと

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

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

エラーメッセージ

 該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Quiz</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <h1>タイトル<br>タイトル</h1>
    <div class="container">
        <div id="question">
        </div>
        <ul id="answers">
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div id="btn" class="disabled">次の問題に進む</div>
        <div id="result">
            <p>Score:3/3</p>
            <a href="">もう一度挑戦する</a>
        </div>
    </div>
    <script src=main.js></script>
</body>
</html>
body{
    font-size: 16px;
    font-family: Verdana, sans-serif;
}

h1{
    font-size: 25px;
    text-align: center;
}

.container{
    width:400px;
    margin: 10px auto;
    position: relative;
}

#question{
    /* background:#cce5ff ;
    color:#004085;
    height: 40px;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 10px; */
    margin-bottom: 10px;
    padding: 10px;
    text-align: center;
}
#question img{
    width: 500px;
    height: 500px;
}

#answers{
    list-style: none;
    padding: 0;
    margin: 0;
}

#answers > li{
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    margin-bottom:10px;
    text-align: center;
}

/* li:hoverには余白を開けない! */
#answers > li:hover {           
    cursor: pointer;
    background: #f8f8f8;
}

#btn,#result > a{
    cursor: pointer;
    background: #3498db;
    border-radius: 4px;
    padding: 10px;
    text-align: center;
    color: #fff;
    box-shadow: 0 3px 0 #2880b9;
}

#btn .disabled{
    opacity: 0.6;
}

#answers >li.correct{
    background: #d4edda;
    border-color:#c3e6cb;
    color: #155724;
    font-weight: bold;
}

#answers >li.wrong{
    background: #f8d8da;
    border-color:#f5c6cb;
    color: #721c24;
    font-weight: bold;
}

#result{
    position: absolute;
    /* top: 50px; */
    top: -500px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: #fff;
    width: 300px;
    border-radius: 3px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
    transition: 0.4s ease-out;
}

#result > p{
    font-size: 24px;
}

#result > a{
    display: block;
    text-decoration: none;
    color: #fff;
}

#result.show{
    top:50px;
}
(function(){
    'use stict';
    let question=document.getElementById('question')
    let btn=document.getElementById('btn')
    let answers=document.querySelectorAll('#answers>li');
    let result=document.getElementById('result')
    let scoreLabel=document.querySelector('#result>p');

    //選択しを画面表示前にシャッフル
    let shuffledAnswers;

     let img = new Array();
     img[0] = new Image();
     img[0].src="img/img1.png"
     img[1] = new Image();
     img[1].src="img/img2.png";
     img[2] = new Image();
     img[2].src="img/img3.png";
     img[3] = new Image();
     img[3].src="img/img4.png";
     img[4] = new Image();
     img[4].src="img/img5.png";
     img[5] = new Image();
     img[5].src="img/img6.png";

    let quizSet=[
        {q:img[0],a:['a','b','c']},
        {q:img[1],a:['a','b','c']},
        {q:img[2],a:['a','b','c']},
        {q:img[3],a:['a','b','c']},
        {q:img[4],a:['a','b','c']},
        {q:img[5],a:['a','b','c']},

    ];

    let currentNum=0;
    let isAnswered;
    let score = 0;

    //フィッシャー・イェーツのシャッフルアルゴリズムを使い、問題をランダムに表示する
    function shuffle(arr){
        let i;
        let j;
        let tmp;
        // iが配列の最後で、iが0以上である間、iをどんどん前にずらしていく
        for(i=arr.length-1;i>=0;i--){
            j=Math.floor(Math.random() *(i+1));
            tmp=arr[i];
            arr[i]=arr[j];
            arr[j]=tmp;
        }
        return arr;
    }

    function setQuiz(){
        let i;
        //テキストコンテントに画像は挿入できない
        // question.textContent=quizSet[currentNum].q;
        // questionの要素の子を削除
        Array.from(question.children).forEach(o => o.remove())
        question.appendChild(quizSet[currentNum].q);

        shuffledAnswers=shuffle(quizSet[currentNum].a.slice());
        // answers[0].textContent=shuffledAnswers[0];
        // answers[1].textContent=shuffledAnswers[1];
        // answers[2].textContent=shuffledAnswers[2];
        isAnswered = false;
        for(i=0;i<answers.length;i++){
            answers[i].classList.remove('correct');
            answers[i].classList.remove('wrong');
            answers[i].textContent=shuffledAnswers[i];
        }
        btn.classList.add('disabled');
        // 最後のクイズの場合、nextではなく、「正答率を見る」を表示
        if(currentNum === quizSet.length - 1){
            btn.textContent='正答率を見る';
        }

    }

    function setEvents(){
        let i;
        for(i=0;i<answers.length;i++){
            answers[i].addEventListener('click',function(){
                checkAnswer(this);
            })
        }
        btn.addEventListener('click',function(){
            if(this.classList.contains('disabled')){
                return;
            }
            // setQuiz();
            // 最終問題をといたらクイズを終わらせる
            if(currentNum === quizSet.length){
                // show score
                // console.log('Score: ' + score + ' / ' + quizSet.length); 
                scoreLabel.textContent='Score: ' + score + ' / ' + quizSet.length;
                result.classList.add('show');               
            }else{
                // setQuiz
                setQuiz();
            }
        })
    }

    function checkAnswer(node){
        if(isAnswered){
            return;
        }
        isAnswered=true;
        if(node.textContent === quizSet[currentNum].a[0]){
            // console.log("correct");
            node.textContent+='....御名答!';
            node.classList.add('correct');
            score++;
        }else {
            // console.log("wrong");
            node.textContent+='....おしい!';
            node.classList.add('wrong');
        }
        // 次の問題へ移行する処理
        btn.classList.remove('disabled');
        currentNum++;
    }

    setQuiz();
    setEvents();

})();

 試したこと

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

// リンクの要素を作成します
let a = document.createElement('a');
a.href = "http://hogehoge.html";

// 変更なし
let img = new Array();
img[0] = new Image();
img[0].src="img/img1.png"

// 画像をリンクの要素に入れます
a.appendChild(img);
// リンクをターゲットの要素に入れます
target.appendChild(a);

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/30 06:20

    ありがとうございました!!

    キャンセル

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

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

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