JavaScript 配列の中に画像を挿入したい

Question

実現したいこと、試したこと

ボタンを押して画像をモーダル表示、それを配列にしたいのですが書き方がわかりません。
現在クイズを作っていて、ヒントとして画像を用意しようと思っています。

quizSetオブジェクトにプロパティを作ってイメージを挿入しようとしましたが、うまくできませんでした。

該当のソースコード

"use strict";

{
  const question = document.getElementById("question"); 
  const choices = document.getElementById("choices");
  const btn = document.getElementById("btn");
  const result = document.getElementById("result");
  const scoreLabel = document.querySelector("#result > p");
  const supplement = document.getElementById("supplement");
  const answer = document.getElementById("answer");
  const a = document.getElementById("a");
  const p = document.getElementById("p");
  const open = document.getElementById("open");
  const close = document.getElementById("close");
  const modal = document.getElementById("modal");
  const mask = document.getElementById("mask");

 const quizSet = [
    {
      q: "問題１",
      c: ["選択肢１", "選択肢２", "選択肢３", "選択肢４"],
      a: "答え：選択肢１",
      p:"解説",
      h:"",
    },
    {
      q: "問題２",
      c: ["選択肢１", "選択肢２", "選択肢３", "選択肢４"],
      a: "答え：選択肢１",
      p:"解説",
      h:"",
    },
  ];

  open.title = "ヒント";



  open.addEventListener("click", () => {
    modal.classList.remove("hidden3");
    mask.classList.remove("hidden3");
  });
  close.addEventListener("click", () => {
    modal.classList.add("hidden3");
    mask.classList.add("hidden3");
  });
  mask.addEventListener("click", () => {
    close.click();
  });




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



  function shuffle(arr) {
    //シャッフル関数
    for (let i = arr.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [arr[j], arr[i]] = [arr[i], arr[j]];
    }
    return arr;
  }



  function checkAnswer(li) {
    //操作の細部設定。正誤判定の表示。
    a.textContent = quizSet[currentNum].a;
    p.textContent = quizSet[currentNum].p;
    supplement.classList.remove("hidden2");
    if (isAnswered === true) {
      //他を押せなくする
      return;
    }
    isAnswered = true;
    if (li.textContent === quizSet[currentNum].c[0]) {
    
      li.classList.add("correct");
      score++;
    } else {
      li.classList.add("wrong");
    }
    btn.classList.remove("disabled");
  }




  function setQuiz() {
    //関数でまとめる
    isAnswered = false;
    question.textContent = quizSet[currentNum].q;

    while (choices.firstChild) {
      choices.removeChild(choices.firstChild);
    }



    const shuffledChoices = shuffle([...quizSet[currentNum].c]); //シャッフルしてから表示

    shuffledChoices.forEach((choice) => {
      const li = document.createElement("li"); //HTMLへの埋め込み
      li.textContent = choice;
      li.addEventListener("click", () => {
     
        checkAnswer(li);
      });
      choices.appendChild(li);
    });

    if (currentNum === quizSet.length - 1) {
      btn.textContent = "スコア";
    }
  }




  setQuiz();

  btn.addEventListener("click", () => {
    if (btn.classList.contains("disabled")) {
      return;
    }
    btn.classList.add("disabled");
    supplement.classList.add("hidden2");
    if (currentNum === quizSet.length - 1) {
      scoreLabel.textContent = `Score: ${score} / ${quizSet.length}`;
      result.classList.remove("hidden");
    } else {
      currentNum++;
      setQuiz();
    }
  });
}

Answer 1

JavaScript で HTMLに画像を出力する目的で画像を変数に入れるなら、画像のURLをテキストで持っておいて、使用するときにimg要素のsrc属性に入れればよいです。img要素のDOMオブジェクト自体を変数に入れることもできますが、URLのほうが簡単な気がします。

Comments

[退会済みユーザー]

JavaScriptの方にはどのように記述すればいいのでしょうか？

[kei344]

何をですか？

[退会済みユーザー]

どのように記述すればURLをimg要素のsrc属性に入れられますか？

[kei344]

img要素のDOMのsrcにURLを代入すればよいですが、「JavaScript src 書き換え」で検索して調べるのが早いと思います。
https://www.google.co.jp/search?safe=off&q=JavaScript+src+%E6%9B%B8%E3%81%8D%E6%8F%9B%E3%81%88

[退会済みユーザー]

できました！！ありがとうございます