Can you change out an image in CSS using JavaScript-CodePudding

I'm current creating an online quiz with HTML, JS, & CSS.

I have created question boxes that cycle through each question, but I am trying to have a different image displayed for each new question.

I currently have a CSS element which can place an image into the quiz box but doing that means I have the same image for every question.

I was hoping to use JS to change the image but i haven't quite got it yet.

.styledimg {
    background-image: url(spider.png);
    background-repeat: no-repeat;
    width: 640px;
    height: 360px;
}

Here I have the image contained in the CSS element

let questions = [
    {
    numb: 1,
    question: "Question",
    answer: "option", 
    options: [
      "option",
      "option",
      "option",
      "option"
    ]
  },

Here is the start of the array that houses my questions

 <div ></div>

Here is the tag associated with the CSS element

I was trying to use something like 'document.querySelector("styledimg").style.background-image = "clock.png"'

to change the image for each question but to no avail.

If anyone could point me in the right direction that would be appreciated.

CodePudding user response：

Try

document.querySelector(".styledimg").style.backgroundImage = "clock.png"

You can also do this by adding a class to this element:

.styledimg {
    background-image: url(spider.png);
}

.styledimg.clock {
    background-image: url(clock.png);
}

document.querySelector(".styledimg").classList.add('clock');

CodePudding user response：

It would be nice to have a working snippet. (HTML CSS JS)

Other than that, you should simply create an <img id="quizzImg" src="spider.png"> tag into the <div>.

After that, simply:

const quizzImage = document.querySelector("#quizzImg")
quizzImage.setAttribute("src", "clock.png")

You would just have to wrap that into a function, and call it whenever you change of question, pass as argument the new image file name, and you're set and it will be easy to use on your end.

const quizzImage = document.querySelector("#quizzImg")

function setQuizzImage(src) {
    quizzImage.setAttribute("src", src)
}

Done, you have a function that can be used again and again to change the image by anything you want, you just have to call that function and pass the file name as an argument like:

setQuizzImage("clock.png")

All that is left is to make the condition over it to determines when you will run it, and what image you will set based on that condition.

As we have no idea of your code structure and process, I will try to guess. If you call a function to change the question, you could store the question number in a variable, and based on that number, make usage of a if statement in something like that:

function changeQuestion() {
    [...]
    if (currentQuestion == 1) {
        setQuizzImage("question1.png")
    } else if (currentQuestion == 2) {
        setQuizzImage("question2.png")
    } else
    [...]
}

You could imagine setting it here. (of course, I had to hardcode the if as I have no idea of how your code works)