element.style.backgroundImage = `url(${url})`; not working

by

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();
});

393 thoughts on “element.style.backgroundImage = `url(${url})`; not working”

  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>
    Reply

  272. Having read this I believed it was rather enlightening.

    I appreciate you taking the time and energy to put this
    informative article together. I once again find myself spending a lot
    of time both reading and posting comments. But so what,
    it was still worth it!

    My webpage: CBD for dogs

    Reply

Leave a Comment