Show text contained in javascript

Question

I’m playing a game of questions and answers, but I’m having trouble with the code.

The value exists, I have another code with the check and I can check the values of the checkbox.

var perguntas = [

  ["Qual a Capital do Brasil?", "Rio de Janeiro", "Brasilia", "São Paulo", "Minas Gerais"],

  ["Qual a Capital dos Estados Unidos?", "Nova York", "Los Angeles", "Paris", "Washington"]

];

function geraValorPergunta() {
  return Math.floor(Math.random() * perguntas.length);
}

function newQuestion(perguntas) {

  var numeroPergunta = geraValorPergunta();
  var div = document.createElement("div");
  div.classList.add("perguntas");

  var form = document.createElement("form");
  form.method = "post";

  var pa = document.createElement("p");
  pa.textContent = perguntas[numeroPergunta][0];

  // cria filhos
  div.appendChild(pa);
  div.appendChild(form);

  // cria input
  var criaInputs = [];
  for (var i = 1; i < perguntas[0].length; i++) {
    criaInputs[i] = document.createElement("input");
    criaInputs[i].classList.add("classeInput");
    criaInputs[i].type = "radio";
    criaInputs[i].name = "opcao";
    criaInputs[i].value = perguntas[numeroPergunta][i];
    criaInputs[i].textContent = perguntas[numeroPergunta][i];
    form.appendChild(criaInputs[i]);
  };

  var botao = document.createElement("button");
  botao.classList.add("resposta");
  botao.textContent = "Enviar";
  botao.addEventListener("click", function(event) {
    event.preventDefault();
    verificaResposta(numeroPergunta);
  });
  form.appendChild(botao);
  return div;
}

The problem is this, the textcontent does not appear in console.log, it appears normally, but not on the page. I have tried innerhtml, textcontent etc etc, but it does not work, although the answer check works.

Answer 1

Elements <input type="radio" cannot have text inside. Hence the textContent or innerHTML did not work. Use <label> thus:

// cria input
for (var i = 1; i < perguntas[0].length; i++) {
    var label = document.createElement('label');
    var input = document.createElement("input");
    input.classList.add("classeInput");
    input.type = "radio";
    input.name = "opcao";
    input.value = perguntas[numeroPergunta][i];
    label.textContent = perguntas[numeroPergunta][i];
    label.insertBefore(input, label.firstChild);
    form.appendChild(label);
};

Example:

var perguntas = [

  ["Qual a Capital do Brasil?", "Rio de Janeiro", "Brasilia", "São Paulo", "Minas Gerais"],

  ["Qual a Capital dos Estados Unidos?", "Nova York", "Los Angeles", "Paris", "Washington"]

];

function geraValorPergunta() {
  return Math.floor(Math.random() * perguntas.length);
}

function newQuestion(perguntas) {

  var numeroPergunta = geraValorPergunta();
  var div = document.createElement("div");
  div.classList.add("perguntas");

  var form = document.createElement("form");
  form.method = "post";

  var pa = document.createElement("p");
  pa.textContent = perguntas[numeroPergunta][0];

  // cria filhos
  div.appendChild(pa);
  div.appendChild(form);

  // cria input
  for (var i = 1; i < perguntas[0].length; i++) {
    var label = document.createElement('label');
    var input = document.createElement("input");
    input.classList.add("classeInput");
    input.type = "radio";
    input.name = "opcao";
    input.value = perguntas[numeroPergunta][i];
    label.textContent = perguntas[numeroPergunta][i];
    label.insertBefore(input, label.firstChild);
    form.appendChild(label);
  };

  var botao = document.createElement("button");
  botao.classList.add("resposta");
  botao.textContent = "Enviar";
  botao.addEventListener("click", function(event) {
    event.preventDefault();
    verificaResposta(numeroPergunta);
  });
  form.appendChild(botao);
  return div;
}

var question = newQuestion(perguntas);
document.body.appendChild(question);

form > label {
    display: block;
}