Q&A
（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
前提・実現したいこと
JS上で配列として格納させた画像を表示させたいです。加えて、しっかりと表示ができたら、CSSで修正できるようにしたいです。CSS上でも、どのようにしたらimgの調整ができるのか教えて頂けるとありがたいです。
（昨日も同じような質問をさせて頂いたのですが、よくわからず、再度質問させていただきます。）
発生している問題・エラーメッセージ
下記JSの通りなのですが、qの部分を画像にして表示させたいのですが、
[object HTMLImageElement]
と表示されてしまいます。
なお、What is B?以降は正しく表示されています。
エラーメッセージ
該当のソースコード
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:'What is B?',a:['a','b','c']}, {q:'What is C?',a:['a','b','c']}, {q:'What is D?',a:['a','b','c']}, {q:'What is E?',a:['a','b','c']}, {q:'What is F?',a:['a','b','c']},
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 <div class="container"> 12 <div id="question"></div> 13 <ul id="answers"> 14 <li></li> 15 <li></li> 16 <li></li> 17 </ul> 18 <div id="btn" class="disabled">Next</div> 19 <div id="result"> 20 <p>Score:3/3</p> 21 <a href="">Replay</a> 22 </div> 23 </div> 24 <script src=js/main.js></script> 25</body> 26</html>
CSS
1body{ 2 font-size: 14px; 3 font-family: Verdana, sans-serif; 4} 5 6.container{ 7 width:400px; 8 margin: 10px auto; 9 position: relative; 10} 11 12#question{ 13 background:#cce5ff ; 14 color:#004085; 15 height: 40px; 16 border-radius: 4px; 17 padding: 10px; 18 margin-bottom: 10px; 19} 20 21#answers{ 22 list-style: none; 23 padding: 0; 24 margin: 0; 25} 26 27#answers > li{ 28 border: 1px solid #ccc; 29 border-radius: 4px; 30 padding: 10px; 31 margin-bottom:10px; 32} 33 34/* li:hoverには余白を開けない！ */ 35#answers > li:hover { 36 cursor: pointer; 37 background: #f8f8f8; 38} 39 40#btn,#result > a{ 41 cursor: pointer; 42 background: #3498db; 43 border-radius: 4px; 44 padding: 10px; 45 text-align: center; 46 color: #fff; 47 box-shadow: 0 3px 0 #2880b9; 48} 49 50#btn .disabled{ 51 opacity: 0.6; 52} 53 54#answers >li.correct{ 55 background: #d4edda; 56 border-color:#c3e6cb; 57 color: #155724; 58 font-weight: bold; 59} 60 61#answers >li.wrong{ 62 background: #f8d8da; 63 border-color:#f5c6cb; 64 color: #721c24; 65 font-weight: bold; 66} 67 68#result{ 69 position: absolute; 70 /* top: 50px; */ 71 top: -500px; 72 left: 0; 73 right: 0; 74 margin: 0 auto; 75 background: #fff; 76 width: 300px; 77 border-radius: 3px; 78 padding: 30px; 79 text-align: center; 80 box-shadow: 0 0 2px rgba(0,0,0,0.5); 81 transition: 0.4s ease-out; 82} 83 84#result > p{ 85 font-size: 24px; 86} 87 88#result > a{ 89 display: block; 90 text-decoration: none; 91 color: #fff; 92} 93 94#result.show{ 95 top:50px; 96} 97
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:'What is B?',a:['a','b','c']}, 29 {q:'What is C?',a:['a','b','c']}, 30 {q:'What is D?',a:['a','b','c']}, 31 {q:'What is E?',a:['a','b','c']}, 32 {q:'What is F?',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 question.textContent=quizSet[currentNum].q; 58 shuffledAnswers=shuffle(quizSet[currentNum].a.slice()); 59 // answers[0].textContent=shuffledAnswers[0]; 60 // answers[1].textContent=shuffledAnswers[1]; 61 // answers[2].textContent=shuffledAnswers[2]; 62 isAnswered = false; 63 for(i=0;i<answers.length;i++){ 64 answers[i].classList.remove('correct'); 65 answers[i].classList.remove('wrong'); 66 answers[i].textContent=shuffledAnswers[i]; 67 } 68 btn.classList.add('disabled'); 69 // 最後のクイズの場合、nextではなく、showscroreを表示 70 if(currentNum === quizSet.length - 1){ 71 btn.textContent='Show Score'; 72 } 73 74 } 75 76 function setEvents(){ 77 let i; 78 for(i=0;i<answers.length;i++){ 79 answers[i].addEventListener('click',function(){ 80 checkAnswer(this); 81 }) 82 } 83 btn.addEventListener('click',function(){ 84 if(this.classList.contains('disabled')){ 85 return; 86 } 87 // setQuiz(); 88 // 最終問題をといたらクイズを終わらせる 89 if(currentNum === quizSet.length){ 90 // show score 91 // console.log('Score: ' + score + ' / ' + quizSet.length); 92 scoreLabel.textContent='Score: ' + score + ' / ' + quizSet.length; 93 result.classList.add('show'); 94 }else{ 95 // setQuiz 96 setQuiz(); 97 } 98 }) 99 } 100 101 function checkAnswer(node){ 102 if(isAnswered){ 103 return; 104 } 105 isAnswered=true; 106 if(node.textContent === quizSet[currentNum].a[0]){ 107 // console.log("correct"); 108 node.textContent+='....Correct!'; 109 node.classList.add('correct'); 110 score++; 111 }else{ 112 // console.log("wrong"); 113 node.textContent+='....Wrong!'; 114 node.classList.add('wrong'); 115 } 116 // 次の問題へ移行する処理 117 btn.classList.remove('disabled'); 118 currentNum++; 119 } 120 121 setQuiz(); 122 setEvents(); 123 124})(); 125
試したこと
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答2件
0
ベストアンサー
変更箇所をピックアップしました。
変更については詳細はコメントを参考にしてください。
javascript
1 function setQuiz() { 2 let i; 3 4 // 廃止: テキストコンテントに画像は入れられないため 5 // question.textContent = quizSet[currentNum].q; 6 7 // questionの要素の子を削除しておきます 8 Array.from(question.children).forEach(o => o.remove()); // ....(1) 9 // img要素をquestionの要素の中に追加します 10 question.appendChild(quizSet[currentNum].q);
ちなみに(1)の部分ですが、question.childrenがHTMLCollection型でforEachが使えないので、
一端配列に直してからforEachしたものになります。jQueryであれば次のような感じで書けます。
javascript
1$(question).empty();
投稿2018/10/29 06:23
編集2018/10/29 06:27
退会済みユーザー
総合スコア0
0
{q:img[0],a:['a','b','c']},
javascript
1{q:"<img src='"+img[0].src+"'>",a:['a','b','c']},
的な処理でいけませんか？
投稿2018/10/29 06:04
編集2018/10/29 06:05
総合スコア114779
試してみましたが、<img src='"+img[0].src+"'>が文字として認識されてしまい、うまく行きませんでした...
> question.textContent=quizSet[currentNum].q;
のところを
question.innerHTML=quizSet[currentNum].q;
にするとか
こちらでも、うまく行きました！ありがとうございます！
ただ、他の回答者の方が早く解決策を提示して頂いたので、ppnさんのBAとさせてください。
いち早く回答頂き、またご親切にして頂き誠にありがとうございます。今後ともよろしくお願いいたします。
あなたの回答
tips
プレビュー
