Estoy desarrollando una aplicación de prueba y hay dos funciones principales:
Esta función obtendrá preguntas de una API y mostrará todo en la página web.
Esta función comprobará si el usuario ha escrito correctamente la respuesta. Si es así, agregue 1 a la variable de puntuación. Pero cuando se ejecuta la primera función, no me muestra nada. Supongo que la opción no se muestra correctamente o algo así. Aquí está el código de mi primera función:
async function fetchData() { var getData = await fetch(url); var toJS = await getData.json(); answer_container = toJS.results[0].correct_answer; var container = []; for (var i = 0; i < toJS.results[0].incorrect_answers.length; i++) { container.push(toJS.results[0].incorrect_answers[i]); } container.push(toJS.results[0].correct_answer); container.sort(func); function func(a, b) { return 0.5 - Math.random(); } container.forEach(function(choices) { html_container.push(` <option value=${choices}> ${choices} </option> `) console.log(choices); }); document.getElementById('choice').add(html_container.join()); if (toJS.results[0].type === 'boolean') { document.getElementById('type').innerHTML = `This question is a ${toJS.results[0].category} question <br> It is a true/false question<br> Difficulty level: ${toJS.results[0].difficulty} <br> Question: ${toJS.results[0].question}<br> `; } else { document.getElementById('type').innerHTML = `This question is a ${toJS.results[0].category} question <br> It is a ${toJS.results[0].type} choice question <br> Difficulty level: ${toJS.results[0].difficulty} <br> Question: ${toJS.results[0].question}<br> `; } document.getElementById('answer_element').style.display = "none"; document.getElementById('answer_element').innerHTML = "The answer to this question is " + toJS.results[0].correct_answer; } fetchData();Recibí este error en la consola:
TypeError no capturado (en promesa): no se pudo ejecutar 'agregar' en 'HTMLSelectElement': el valor proporcionado no es del tipo '(HTMLOptGroupElement o HTMLOptionElement)'.
Pero claramente agregué mis opciones a un elemento seleccionado con una identificación de elección.
Supongo que la line 23 es el error, ya que fue el único método de add que se muestra. El error se produce al pasar una cadena ( html_container.join() ) al método add , pero espera un HTMLOptGroupElement o HTMLOptionElement . Para solucionar este problema, tiene al menos dos opciones: createElement e innerHTML .
createElement con innerHTML Use document.createElement('option') al crear el elemento de opción de la siguiente manera:
var option = document.createElement('option'); option.value = choices; option.innerHTML = choices; document.getElementById('choice').add(option);innerHTML Use .innerHTML para agregar la cadena al HTML interno del elemento seleccionado de la siguiente manera:
// use += to append document.getElementById('choice').innerHTML += html_container.join();