Estoy tratando de mostrar diferentes imágenes basadas en una identificación de pregunta json usando javascript vainilla y el método document.createElement(). Este código no mostrará imágenes, pero si solo intento mostrar una imagen, funcionará. Aquí está el código correspondiente:
let img = document.createElement("img"); img.src = 'images/image1' if (questions.id === 0) { questionImageElement.appendChild(img) } let img2 = document.createElement('img') img2.src = "images/image2" if(questions.id === 1) { questionImageElement.appendChild(img2) } let img3 = document.createElement('img') img3.src = "images/image3" if(questions.id === 2) { questionImageElement.appendChild(img3) } let img4 = document.createElement('img') img4.src = "images/image4.png" if(questions.id === 3) { questionImageElement.appendChild(img4) } else { questionImageElement.innerText = " " }ejemplo de pregunta json
{ id: 0, question: ' 1. How many possible values are there for a boolean variable?', answers: [ {text: '1', correct: false}, {text: '2', correct: true}, {text: '3', correct: false}, {text: 'There is an infinite number of possibilities', correct: false} ] }, Si solo tengo un método document.createElement(), se mostrará la imagen. De esta manera, con múltiples métodos createElement(), no funcionará. Intenté usar una matriz de nodos e ingresar el índice de matriz en el método appendChild, por ejemplo, appendChild(img[0]) pero eso tampoco funcionará. ¿Cómo se puede lograr esto?
Elimina la última sentencia else. La última declaración else que tiene es borrar todas las imágenes del DOM si la identificación no es igual a 3. En este caso, su identificación es 0, por lo que lo que probablemente sucede es que las imágenes se agregan, pero luego se borran por esa otra declaración.