element.style.backgroundImage = `url(${url})`; 不工作

Question

all. I meet a problem about how dynamically change a background image of a div. When I click the next button, I want to change the background image; however, the syntax 'disk.style.backgroundImage = "url(xxx)" does not working; how could i fix it? The below is corresponding codes, hope you guys could help me solve it.

HTML CODE:

<div id="disk" class="player--info__left"></div>

CSS CODE

        .player--info__left{
            position: absolute;
            width: 5.5rem;
            height: 5.5rem;
            border: 1px solid #fff;
            border-radius: 50%;
            padding: 2px;
            top: -1.5rem;
            left: -1.5rem;
            margin: 0 4px 2px 2px;
            background-image: url('/images/IMG_4328.JPG');
            background-size: cover;
            object-fit: cover;
            &:hover{
                transform: rotate(360deg);
                transition: all 1s ease-in-out;
            }
            &::after{
                content: '';
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                border-radius: 50%;
                border: 3px solid rebeccapurple;
            }
        }

JS CODE, in this part I want to change the background image dynamically.

const songList = [
    {
        src: '/music/Gymnopédies.mp3',
        img: '/music-img/Gymnopédies.jpg',
        title: 'Gymnopédies',
        singer: 'Erik Satie',
    },
    {
        src: '/music/Old Town Road.mp3',
        img: '/music-img/Lil Nas X.png',
        title: 'Old Town Road',
        singer: 'Lil Nas X',
    },
    {
        src: '/music/Daddy.mp3',
        img: '/music-img/Daddy.png',
        title: 'Daddy',
        singer: 'Coldplay',
    },
];

let index = 0;
next.addEventListener('click', function () {
    ++index;
    if (index >= songList.length - 1) {
        index = 0;
    }
    // isPlaying = true;
    console.log(disk);
    console.log(diskp);
    disk.style.backgroundImage = `url(${songList[index].img})`;

    playSong();
    playerButton.click();
});

Answer 1

This snippet proves that there is no problem cycling through background images using a button click. Meaning your question is incomplete, the problem lies elsewhere.
We won't be able to answer your question unless you provide more details.

 const imageUrls = [ "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/220px-FullMoon2010.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/220px-The_Earth_seen_from_Apollo_17.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/OSIRIS_Mars_true_color.jpg/220px-OSIRIS_Mars_true_color.jpg", ]; let index = 0; function onButtonClick() { const disk = document.getElementById("disk"); disk.style.backgroundImage = `url(${imageUrls[index]})`; index++; if (index >= imageUrls.length) index = 0; }

 #disk { width: 220px; height: 220px; }

 <button onclick="onButtonClick()">Click me repeatedly to cycle through images</button> <div id="disk" class="player--info__left"></div>