Show text contained in javascript

Question

Show text contained in javascript

Navigation

#1 by (0 votes)

2

I'm doing a question and answer game, 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 as follows, the textcontent does not appear in the console.log, it appears normally but not on the page. I've tried innerhtml, textcontent etc etc, but it does not work, although response checking works.

javascript xamarin

asked by anonymous 26.06.2017 / 05:42

1 answer

Problems with AJAX MATLAB - Data is lost when closing the FOR loop

score 0 · Answer 1

<input type="radio" elements can not have text inside. Hence the textContent or innerHTML did not work. Uses <label> like this:

// 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;
}