0

Deseo mostrar los elementos por el DOM pero hay errores donde las variables pregunta, place y questions aparecen declaradas pero no entiendo el por qué ni cómo resolverlo. Pensé en eliminar esas declaraciones pero no sería viable. Aparte de eso el acceso a appenChild arroja null, lo cual tampoco entiendo por qué.

let pregunta = 0
const respuestas = []
const comparing = []
let comp = false
let score = 0

let finalScore = 0
let corrects = 0

let place = document.getElementById('ask')


const questions = [
  {
    id: 1,
    text: 'Pregunta uno',
    points: 3,
    answer1: '1) Opcion uno',
    answer2: '2) Opcion dos',
    answer3: '3) Opcion tres',
    isCorrect: 1,
  },
  {
    id: 2,
    text: 'Pregunta dos',
    points: 2,
    answer1: '1) Opcion uno',
    answer2: '2) Opcion dos',
    answer3: '3) Opcion tres',
    isCorrect: 2,
  },
  {
    id: 3,
    text: 'Pregunta tres',
    points: 2,
    answer1: '1) Opcion uno',
    answer2: '2) Opcion dos',
    answer3: '3) Opcion tres',
    isCorrect: 3,
  },
  {
    id: 4,
    text: 'Pregunta cuatro',
    points: 1,
    answer1: '1) Opcion uno',
    answer2: '2) Opcion dos',
    answer3: '3) Opcion tres',
    isCorrect: 2,
  },
]


function sendQuestion() {
  for (let i = 0; i < questions.length; i++) {
    let isCorrect = questions[i].isCorrect
    let points = questions[i].points
    pregunta = Number(
      prompt(
        questions[i].text +
          '\n' +
          questions[i].answer1 +
          '\n' +
          questions[i].answer2 +
          '\n' +
          questions[i].answer3,
      ),
    )
    while (pregunta < 1 || pregunta > questions.length) {
      pregunta = Number(prompt('Ingrese número válido: 1, 2 ó 3'))
    }

    respuestas.push({ respuestaUsuario: pregunta, isCorrect, points })
    console.log('Respuestas: ', respuestas)
  }
  return respuestas
}
sendQuestion()

function compare() {
  for (let i = 0; i < respuestas.length; i++) {
    if (respuestas[i].respuestaUsuario == respuestas[i].isCorrect) {
      ;(comp = true), (score = respuestas[i].points)
    } else {
      ;(comp = false), (score = 0)
    }
    comparing.push({ comp, score })
  }
}

compare()
console.log(11, comparing)

function setScore() {
  for (let i = 0; i < comparing.length; i++) {
    finalScore += comparing[i].score
    corrects += comparing[i].comp
  }
}

setScore()
console.log('Resultado ' + finalScore, corrects)

alert(
  'Has respondido ' +
    corrects +
    ' pregunta/s correctamente' +
    '\n' +
    'Has obtenido una puntuación de ' +
    finalScore,
)

for (question of questions) {
  let preg = document.createElement('div')
  preg.innerHTML = `
  <p> ${question.text}<p/>
  <p>${question.answer1}</p>
  <p>${question.answer2}</p>
  <p>${question.answer3}</p><br>
  `
  place.appendChild(preg)
}

let showResult = document.createElement('div')
showResult.className = 'adjustResults'
showResult.id = 'adjustResults'
showResult.innerHTML = `
<p> Has respondido  ${corrects} pregunta/s correctamente
y has obtenido una puntuación de  ${finalScore}`
place.appendChild(showResult)
1
  • 2
    el problema puede ser que el js se esté ejecutando primero que el html, dado que si colocas un console.log a la variable place te va a imprimir un null, es debido a que en el momento que intentaste obtener el elemento, aun no existía. Para eso has uso del window.onload para que el js que dependa del html pueda cargar la info como se spera y así manipular los elementos como se espera
    – jGomez
    Commented el 7 sept. 2021 a las 14:20

1 respuesta 1

1

Como te lo especifiqué en el comentario, el problema que tienes es debido a que solicitas elementos en tiempos que aun no se han cargado en el DOM.

Lo que debes hacer es definir las variables, crear las funciones que requieres y posterior a esto solicitar que el codigo se ejecute posterior a la carga del HTML.

Esto lo logras haciendo uso del evento de tipo handler onload, preferiblemente haciendo el llamado desde el mismo javascript, solicitando el llamado de este evento a través del objeto window.

Teniendo esto en cuenta, procedo a dejar el código funcional con comentarios indicando que cosas se deben remover y donde ejecutarlas.

let pregunta = 0;
const respuestas = [];
const comparing = [];
let comp = false;
let score = 0;

let finalScore = 0;
let corrects = 0;

// Se remueve la inicializacion de la variable
let place; // = document.getElementById('ask');

const questions = [{
    id: 1,
    text: 'Pregunta uno',
    points: 3,
    answer1: '1) Opcion uno',
    answer2: '2) Opcion dos',
    answer3: '3) Opcion tres',
    isCorrect: 1,
  },
  {
    id: 2,
    text: 'Pregunta dos',
    points: 2,
    answer1: '1) Opcion uno',
    answer2: '2) Opcion dos',
    answer3: '3) Opcion tres',
    isCorrect: 2,
  },
  {
    id: 3,
    text: 'Pregunta tres',
    points: 2,
    answer1: '1) Opcion uno',
    answer2: '2) Opcion dos',
    answer3: '3) Opcion tres',
    isCorrect: 3,
  },
  {
    id: 4,
    text: 'Pregunta cuatro',
    points: 1,
    answer1: '1) Opcion uno',
    answer2: '2) Opcion dos',
    answer3: '3) Opcion tres',
    isCorrect: 2,
  },
]

function sendQuestion() {
  for (let i = 0; i < questions.length; i++) {
    let isCorrect = questions[i].isCorrect;
    let points = questions[i].points;
    pregunta = Number(
      prompt(
        questions[i].text +
        '\n' +
        questions[i].answer1 +
        '\n' +
        questions[i].answer2 +
        '\n' +
        questions[i].answer3
      )
    );
    while (pregunta < 1 || pregunta > questions.length) {
      pregunta = Number(prompt('Ingrese número válido: 1, 2 ó 3'));
    }

    respuestas.push({
      respuestaUsuario: pregunta,
      isCorrect,
      points
    });
    //console.log('Respuestas: ', respuestas);
  }
}
// Se remueve el llamado de la funcion
// sendQuestion();

function compare() {
  for (let i = 0; i < respuestas.length; i++) {
    if (respuestas[i].respuestaUsuario == respuestas[i].isCorrect) {;
      (comp = true), (score = respuestas[i].points)
    } else {;
      (comp = false), (score = 0)
    }
    comparing.push({
      comp,
      score
    })
  }
}

// Se remueve el llamado de la funcion
// compare();

function setScore() {
  for (let i = 0; i < comparing.length; i++) {
    finalScore += comparing[i].score;
    corrects += comparing[i].comp;
  }
}

// Se remueve el llamado de la funcion
// setScore();

// Se remueve bloque de codigo
/**

alert(
  'Has respondido ' +
    corrects +
    ' pregunta/s correctamente' +
    '\n' +
    'Has obtenido una puntuación de ' +
    finalScore
);

for (question of questions) {
  let preg = document.createElement('div');
  preg.innerHTML = `
  <p> ${question.text}<p/>
  <p>${question.answer1}</p>
  <p>${question.answer2}</p>
  <p>${question.answer3}</p><br>
  `;
  place.appendChild(preg);
}

let showResult = document.createElement('div')
showResult.className = 'adjustResults'
showResult.id = 'adjustResults'
showResult.innerHTML = `
<p> Has respondido  ${corrects} pregunta/s correctamente
y has obtenido una puntuación de  ${finalScore}`
place.appendChild(showResult)
*/

// le asignamos al onload lo que deseamos ejecutar posterior a la carga del html, para el correcto funcionamiento del codigo implementado
window.onload = () => {
  // Obtenemos el elemento con id ask y lo almacenamos en la variable place.
  place = document.getElementById('ask');

  // Ejecutamos la funcion sendQuestion
  sendQuestion();

  // Ejecutamos la funcion compare
  compare();

  // Ejecutamos la funcion setScore
  setScore();

  // Mostramos en un alert con las respuesta correctas y la puntuacion final
  alert(
    'Has respondido ' +
    corrects +
    ' pregunta/s correctamente' +
    '\n' +
    'Has obtenido una puntuación de ' +
    finalScore
  );

  // Creamos el for encargado de cargar en el html cada una de las preguntas con sus opciones
  for (question of questions) {
    let preg = document.createElement('div');
    preg.innerHTML = `
        <p> ${question.text}<p/>
        <p>${question.answer1}</p>
        <p>${question.answer2}</p>
        <p>${question.answer3}</p><br>`;

    place.appendChild(preg);
  }

  // Creamos el div que con el resultado obtenido
  const showResult = document.createElement('div');
  showResult.className = 'adjustResults';
  showResult.id = 'adjustResults';
  showResult.innerHTML = `
    <p> Has respondido  ${corrects} pregunta/s correctamente
    y has obtenido una puntuación de  ${finalScore}`;
  place.appendChild(showResult);
};
<div id="ask"></div>
<br>
<br>
<br>

Espero te sirva. Saludos

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.