How to replace image src based on screen size in Java Script

Question

I am changing my background image with the help of Java Script and I have both desktop version image and mobile version image.

When the screen size is reduced to below 600px, I want my desktop version images should be replaced with mobile version images.

Can someone help me on this and below is the code snippet.

const hbg = document.querySelector('.hbg');
const closeBtn = document.querySelector('.close');

hbg.addEventListener('click', ()=>{
    document.querySelector('.nav').parentNode.classList.add('active');
})

closeBtn.addEventListener('click',()=>{
    document.querySelector('.nav').parentNode.classList.remove('active');
})

const data = [
    {
        image: "images/desktop-image-hero-1.jpg",
        header: "Discover innovative ways to decorate",
    },
    {
        image: "images/desktop-image-hero-2.jpg",
        header: "We are available all across the globe",
    },
    {
        image: "images/desktop-image-hero-3.jpg",
        header: "Manufactured with the best materials",
    }
]

let currentPage = 0;

const slide = () => {
    const prev = document.querySelector('.prev');
    const next = document.querySelector('.next');
    const page = document.querySelector('.main-page');
    const header = document.querySelector('.header');

    const updateContent = () => {
        page.style.backgroundImage = `url(${data[currentPage].image})`;
        header.innerHTML = data[currentPage].header;
    }

    next.addEventListener('click', () => {
        currentPage++;
        if(currentPage > data.length-1){
            currentPage = 0;
        }
        updateContent();
    })

    prev.addEventListener('click', () => {
        currentPage--;
        if(currentPage < 0 ){
            currentPage = data.length - 1;
        }
        updateContent();
    })
};

slide();

Answer 1

You can use an object structure like this.

const data = {
    'desktop' : [
    {
        image: "images/desktop-image-hero-1.jpg",
        header: "Discover innovative ways to decorate",
    },
    {
        image: "images/desktop-image-hero-2.jpg",
        header: "We are available all across the globe",
    },
    {
        image: "images/desktop-image-hero-3.jpg",
        header: "Manufactured with the best materials",
    }],
'tablet' : [
    {
        image: "images/desktop-image-hero-1.jpg",
        header: "Discover innovative ways to decorate",
    },
    {
        image: "images/desktop-image-hero-2.jpg",
        header: "We are available all across the globe",
    },
    {
        image: "images/desktop-image-hero-3.jpg",
        header: "Manufactured with the best materials",
    }],
'mobile' : [
    {
        image: "images/desktop-image-hero-1.jpg",
        header: "Discover innovative ways to decorate",
    },
    {
        image: "images/desktop-image-hero-2.jpg",
        header: "We are available all across the globe",
    },
    {
        image: "images/desktop-image-hero-3.jpg",
        header: "Manufactured with the best materials",
    }]
}

The event you want to be looking for is 'onresize'. Check for your conditions and assign the images again.

If you do not want to handle resize, you can simply

 const updateContent = () => {
if(window.innerWidth <360){

}
else if(window.innerWidth <786){


}
else if()

....
    }

But I would suggest using media queries and adding your images from there, unless you want an only JS based solution.