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

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.


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


            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;
                transform: rotate(360deg);
                transition: all 1s ease-in-out;
                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 () {
    if (index >= songList.length - 1) {
        index = 0;
    // isPlaying = true;
    disk.style.backgroundImage = `url(${songList[index].img})`;


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 = [
    let index = 0;
    function onButtonClick() {
      const disk = document.getElementById("disk");
      disk.style.backgroundImage = `url(${imageUrls[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>
  2. 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


Leave a Comment