Valueにセットされた文字列を正しく表示したい。

Question

前提・実現したいこと

ご教授お願いいたします。
クイズのWebアプリケーションを作成していて、Buttonを動的に作成しvalue属性に選択肢を記述しようとしています。
データはopen triviaというフリーのデータベースサーバからJson形式で取得しています。
value属性に選択肢をセットする際、取得してきたデータから選択肢部分を抽出してvalue属性に設定しようと思っています。

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

value属性に選択肢をセットする際、取得してきたデータから選択肢部分を抽出してvalue属性に設定しようと試みましたが、
設定されたデータが実態参照をしてしまうため、正しく文字列が出力されません。

該当のソースコード

const startBtn = document.getElementById('start');
const topContent = document.getElementById('topContent');
const centerContent = document.getElementById('centerContent');
const downContent = document.getElementById('downContent');
const header = document.getElementById('header');
const content = document.getElementById('content');
let questionData;
let questionNumber = 1;
const corrects = [];
const incorrects = [];
const correctAnswers = [];
const questionAnswers = {
  0: [],
  1: [],
  2: [],
  3: [],
  4: [],
  5: [],
  6: [],
  7: [],
  8: [],
  9: []
}

Array.prototype.shuffle = function () {
　　let i = this.length;
　　while (i) {
　　    let j = Math.floor(Math.random() * i);
　　    --i;
　　    [this[i],this[j]] = [this[j],this[i]];
　　}
　　return this;
}

startBtn.addEventListener('click', () => {
  waitingPage();
  startBtn.remove();
  asynchronousFunc()
    .then(fetchCorrectAnswers)
    .then(fetchAnswers)
    .then(changeQuestionPage);
});

const asynchronousFunc = () => {
  return new Promise((resolve, reject) => {
    fetch('https://opentdb.com/api.php?amount=10')
      .then(response => response.json())
      .then(data => {
        questionData = data;
        resolve();
      })
  });
}

const fetchCorrectAnswers = () => {
  for (let i = 0; i < 10; i++) {
    const correctAnswer = questionData.results[i].correct_answer;
    correctAnswers.push(correctAnswer);
  }
}

const fetchAnswers = () => {
  for (let i = 0; i < 10; i++) {
    const correctAnswer = questionData.results[i].correct_answer;
    const inCorrectAnswer = questionData.results[i].incorrect_answers;
    inCorrectAnswer.forEach(item => {
      questionAnswers[i].push(item);
    });
    questionAnswers[i].push(correctAnswer);
    questionAnswers[i].shuffle();
  }
}

const waitingPage = () => {
  header.innerText = '取得中';
  content.innerText = '少々お待ちください';
}

const changeQuestionPage = () => {
  header.innerText = '問題1';
  createCategory();
  createLevel();
  createQuestion();
  createAnswersBtn(questionNumber - 1);

}

const createCategory = () => {
  const category = questionData.results[0].category;
  const genre = document.createElement('h3');
  const genreContent = document.createTextNode('[ジャンル] ' + category);
  genre.appendChild(genreContent);
  topContent.appendChild(genre);
}

const createLevel = () => {
  const difficulty = questionData.results[0].difficulty;
  const level = document.createElement('h3');
  const levelContent = document.createTextNode('[難易度] ' + difficulty);
  level.appendChild(levelContent);
  topContent.appendChild(level);
}

const createQuestion = () => {
  const question = questionData.results[0].question;
  content.innerHTML = question;
}

const createAnswersBtn = number => {
  for (let i = 0; i < questionAnswers[number].length; i++) {
    const answerBtn = document.createElement('input');
    answerBtn.type = 'button';
    answerBtn.name = 'answerBtn';
    answerBtn.value = questionAnswers[number][i];  **◀︎こちらになります。**
    answerBtn.onclick = clickBtn;
    downContent.appendChild(answerBtn);
  }
}

const clickBtn = event => {
  ++questionNumber;
  header.innerText = '問題' + questionNumber;
  topContent.children[1].innerText = '[ジャンル] ' + questionData.results[questionNumber - 1].category;
  topContent.children[2].innerText = '[難易度] ' + questionData.results[questionNumber - 1].difficulty;
  changeAnswersBtn(questionNumber - 1);
}

const changeAnswersBtn = number => {
  while (downContent.firstChild) {
  downContent.removeChild(downContent.firstChild);
  }
  createAnswersBtn(number);
}

{response_code: 0, results: Array(10)}
response_code: 0
results: Array(10)
0:
category: "Entertainment: Film"
correct_answer: "The Thing"
difficulty: "easy"
incorrect_answers: (3) ["Carrie", "Misery", "The Green Mile"]
question: "Which of the following movies was not based on a novel by Stephen King? "
type: "multiple"
__proto__: Object
1: {category: "Science & Nature", type: "multiple", difficulty: "medium", question: "Along with Oxygen, which element is primarily responsible for the sky appearing blue?", correct_answer: "Nitrogen", …}
2: {category: "Entertainment: Film", type: "boolean", difficulty: "medium", question: "There aren't any live-action clones in "…ar Wars: Episode III - Revenge of the Sith".", correct_answer: "True", …}
3: {category: "Entertainment: Video Games", type: "boolean", difficulty: "hard", question: "In "Portal 2", Cave Johnson started out Aperture Science as a shower curtain company.", correct_answer: "True", …}
4: {category: "Geography", type: "multiple", difficulty: "medium", question: "Which of these countries is the smallest by population?", correct_answer: "Norway", …}
5: {category: "Celebrities", type: "multiple", difficulty: "medium", question: "In what year did "Bob Ross" die?", correct_answer: "1995", …}
6: {category: "General Knowledge", type: "multiple", difficulty: "medium", question: "Earl Grey tea is black tea flavoured with what?", correct_answer: "Bergamot oil", …}
7: {category: "Celebrities", type: "multiple", difficulty: "medium", question: "Which American celebrity died in 1977 playing golf in La Moraleja, Madrid?", correct_answer: "Bing Crosby", …}
8: {category: "Entertainment: Television", type: "multiple", difficulty: "easy", question: "On the NBC show Community, whose catch-phrase was "Pop! Pop!"?", correct_answer: "Magnitude", …}
9: {category: "Science & Nature", type: "multiple", difficulty: "hard", question: "Autosomal-dominant Compelling Helio-Ophthalmic Out…drome is the need to do what when seeing the Sun?", correct_answer: "Sneeze", …}
length: 10
__proto__: Array(0)
__proto__: Object

Comments

[maisumakun]

open triviaから得られるJSONはどのような形でしょうか？

[zoetti]

Jsonデータを追記しました。
こちらの内容で問題ないでしょうか？

[zoetti]

レスポンスヘッダーのコンテントタイプはこちらになります。
Content-Type: application/json

[dameo]

input要素ではなくbutton要素にしてtype属性の設定をやめ、value属性で入れるのではなく、innerHTML属性で入れればbutton要素内のテキストとして入るので、正しく文字実体参照で表示できます。

[zoetti]

dameoさんありがとうございます！！
先ほど自分もその結論にいたったところでした。
初歩的なミスすぎて恥ずかしいです...

Answer 1

inputではなくbuttonを使用した。