Can you change out an image in CSS using JavaScript

Question

I'm currently 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 that 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 class="styledimg"></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.

It should work for you: document.querySelector(".styledimg").style.background = "url('bg.png')" — Jimmy Loyola
– Jimmy Loyola, Commented Apr 23, 2022 at 1:54

Rafael Lopes · Accepted Answer · 2022-04-23 01:12:01Z

2

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');

answered Apr 23, 2022 at 1:12

Rafael Lopes

4633 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hhhhhhh · Accepted Answer · 2022-04-23 01:46:44Z

2

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)

edited Apr 23, 2022 at 1:46

answered Apr 23, 2022 at 1:40

hhhhhhh

4412 silver badges7 bronze badges

2 Comments

SeanMV Over a year ago

Omg thank you so much, I'm still really new to coding so it's hard to imagine how it should look but this is perfect thank you!

hhhhhhh Over a year ago

No problem, feel free to contact me if you need assistance in doing tthe entire code. Starting to code should be fun.

Collectives™ on Stack Overflow

Can you change out an image in CSS using JavaScript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related