背景图像不随 setInterval 改变

Question

I try to change background image using setInterval . Only the image changes just once. I have tried to change width value instead and it works.

var hero = document.getElementById('hero')
console.log(hero)

var heroBg = hero.style.backgroundImage;
console.log(heroBg)

function change() {
  console.log('this is showing in the console')

  if (hero.style.background === 'url(./images/image2.jpg)') {
    console.log('this is not showing in the console')
    hero.style.background = 'url(./images/image1.jpg)'
    console.log('testcondition1')
  } else {
    console.log('this is showing in the console')
    hero.style.background = 'url(./images/image2.jpg)'
  }
}

setInterval(change, 3000);

EDIT: this works

    if(hero.style.backgroundImage == 'url("./images/image2.jpg")'){
        console.log('test1')
        hero.style.backgroundImage = 'url("./images/image1.jpg")'
        console.log('testcondition1')
    }else{
        console.log('test2')
        hero.style.backgroundImage='url("./images/image2.jpg")'
    }

I have tried to use double quotes inside the parenthesis and this works. The double quotes outside and single quote inside does not.

Answer 1

Instead of comparing the background CSS property that may be inconsistent across browsers, you may want to use a boolean flag instead.

let flag = true;
function change() {
  console.log('this is showing in the console')
  if (flag) {
    console.log('this is not showing in the console')
    hero.style.background = 'url(./images/image1.jpg)'
    console.log('testcondition1')
  } else {
    console.log('this is showing in the console')
    hero.style.background = 'url(./images/image2.jpg)'
  }
  flag = !flag;
}

Answer 2

I would utilize data attributes to store the state of the hero and just flip between the states.

You can use the value of currentState inside of change , to determine what to do.

Do not attempt to run style information through a conditional, because you are going to have a bad time.

 const maxStates = 2 const hero = document.getElementById('hero') function change() { let currentState = parseInt(hero.dataset.state || 0, 10) currentState = (currentState + 1) % maxStates hero.dataset.state = currentState } setInterval(change, 2000); // Update every 2 seconds.

 #hero { width: 200px; height: 287px; background-color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-position: top left; background-image: url('https://placekitten.com/200/287'); } #hero[data-state="1"] { background-image: url('https://placekitten.com/200/286'); }

 <div id="hero"></div>

Answer 3

in if change background to backgroundImage

hero.style.background