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

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

新規登録して質問してみよう
ただいま回答率
87.20%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

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

sugisugi
sugisugi

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

0評価

0クリップ

784閲覧

投稿2018/10/29 08:35

前提・実現したいこと

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

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

エラーメッセージ

該当のソースコード

HTML

<!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>

CSS

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; }

JS

(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ページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。