Actualmente estoy creando un cuestionario en línea con HTML, JS y CSS.
He creado cuadros de preguntas que recorren cada pregunta, pero estoy tratando de mostrar una imagen diferente para cada pregunta nueva.
Actualmente tengo un elemento CSS que puede colocar una imagen en el cuadro de prueba, pero eso significa que tengo la misma imagen para cada pregunta.
Esperaba usar JS para cambiar la imagen, pero aún no lo tengo.
.styledimg { background-image: url(spider.png); background-repeat: no-repeat; width: 640px; height: 360px; }Aquí tengo la imagen contenida en el elemento CSS.
let questions = [ { numb: 1, question: "Question", answer: "option", options: [ "option", "option", "option", "option" ] },Aquí está el comienzo de la matriz que contiene mis preguntas.
<div class="styledimg"></div>Aquí está la etiqueta asociada con el elemento CSS
Estaba tratando de usar algo como 'document.querySelector("styledimg").style.background-image = "clock.png"'
para cambiar la imagen de cada pregunta, pero fue en vano.
Si alguien pudiera indicarme la dirección correcta, sería apreciado.
Probar
document.querySelector(".styledimg").style.backgroundImage = "clock.png"También puede hacer esto agregando una clase a este elemento:
.styledimg { background-image: url(spider.png); } .styledimg.clock { background-image: url(clock.png); } document.querySelector(".styledimg").classList.add('clock');Sería bueno tener un fragmento de trabajo. (HTML+CSS+JS)
Aparte de eso, simplemente debe crear una <img id="quizzImg" src="spider.png"> en el <div> .
Después de eso, simplemente:
const quizzImage = document.querySelector("#quizzImg") quizzImage.setAttribute("src", "clock.png")Solo tendría que envolver eso en una función y llamarla cada vez que cambie de pregunta, pasar como argumento el nuevo nombre del archivo de imagen, y estará listo y será fácil de usar en su extremo.
const quizzImage = document.querySelector("#quizzImg") function setQuizzImage(src) { quizzImage.setAttribute("src", src) }Listo, tienes una función que se puede usar una y otra vez para cambiar la imagen por lo que quieras, solo tienes que llamar a esa función y pasar el nombre del archivo como argumento como:
setQuizzImage("clock.png")Todo lo que queda es hacer que la condición sobre él determine cuándo lo ejecutará y qué imagen establecerá en función de esa condición.
Como no tenemos idea de la estructura y el proceso de su código, intentaré adivinar. Si llama a una función para cambiar la pregunta, puede almacenar el número de pregunta en una variable y, en función de ese número, hacer uso de una if statement en algo así:
function changeQuestion() { [...] if (currentQuestion == 1) { setQuizzImage("question1.png") } else if (currentQuestion == 2) { setQuizzImage("question2.png") } else [...] }Podrías imaginar establecerlo aquí. (por supuesto, tuve que codificar el if porque no tengo idea de cómo funciona su código)