How do I insert text into respective HTML buttons from the value of JavaScript object properties?-CodePudding

I am building a trivia app that loads random questions (from a series of objects I have stored in a Javascript file). Each question has four answers, 3 of them being wrong and 1 right. I am trying to get the possible answers for each question to load into the buttons. Right now all the buttons are loading the first item of the array for each question.

How is this done? I have experimented with forEach and a few other array methods, and I am thinking that the answers must be iterated over and then something with the indexes of each.

  <div >
    <button id="answers-btn-1" ></button>
    <button id="answers-btn-2" ></button>
    <button id="answers-btn-3" ></button>
    <button id="answers-btn-4" ></button>
  </div>

    randomQuestion.answers.forEach(answer => {
    answersButton1.innerHTML = answer.text;
    answersButton2.innerHTML = answer.text;
    answersButton3.innerHTML = answer.text;
    answersButton4.innerHTML = answer.text;
});

Also, is there a way to consolidate the code with one answer-btn?

CodePudding user response：

What I understand from your descriptions this could be a possible solution:

randomQuestions.answer.forEach((answer, index) => {
  document.getElementById(`answers-btn-${index   1}`).textContent = answer;
});

CodePudding user response：

Example pure JS to control random answers list and use in buttons:

let answersUsed = [];
let answers = [
  'All variables in JavaScript are object data types',
  'Netscape is the software company that developed JavaScript',
  'isNan function returns true if the argument is not a number',
  'JavaScript is a client-side and server-side scripting language',
  'Negative Infinitycan be derived by dividing negative number by zero'
];

function getRandomAnswer() {
  let answerUsed = answers[Math.floor(Math.random() * answers.length)];
  answersUsed.push(answerUsed);
  const index = answers.indexOf(answerUsed);
  if (index > -1) {
    answers.splice(index, 1);
  }
  return answerUsed;
}

answers.forEach(answer => {
  document.getElementById("answers-btn-1").innerHTML = getRandomAnswer();
  document.getElementById("answers-btn-2").innerHTML = getRandomAnswer();
  document.getElementById("answers-btn-3").innerHTML = getRandomAnswer();
  document.getElementById("answers-btn-4").innerHTML = getRandomAnswer();
});

button {
  margin: 8px;
  display: block;
}

<div >
  <button id="answers-btn-1" ></button>
  <button id="answers-btn-2" ></button>
  <button id="answers-btn-3" ></button>
  <button id="answers-btn-4" ></button>
</div>

CodePudding user response：

You can do this by building a list of options and setting the innerHTML of a select element or build an input[type="radio"] for each answer.

const randomQuestion = {answers: [{text: 'one'},{text: 'two'},{text: 'three'},{text: 'four'}]}

const opts = ['<option disabled>Choose one</option>']
randomQuestion.answers.forEach(answer => {
  opts.push(`<option value="${answer.text}">${answer.text}</option>`)
});
const answerSelect = document.querySelector('#answer-select')
answerSelect.innerHTML = opts.join("\n")
answerSelect.size = opts.length // shows all options
answerSelect.value = ""

const radio_opts = []
randomQuestion.answers.forEach(answer => {
  radio_opts.push(`<label><input type="radio" name="answerRadio" value="${answer.text}" />${answer.text}</label>`)
});
document.querySelector('#answers-container').innerHTML = radio_opts.join("\n")

<select  name="answer" id="answer-select">
  <option>answer</option>
</select>

<div  id="answers-container">
  <input type="radio" name="answerRadio">
</div>