Changing background image through window.getComputedStyle

Question

I'm trying to write a function which cycles background-image from 3 different options by button-click, and the code is not working. Maybe someone can tell why...

function changeBackground (){
  console.log('change background');
  var b = document.getElementById('mainbody');
  var bstyle = window.getComputedStyle(b, null).getPropertyValue('background-image');
  if (bstyle == "url('strawberry.png')") {
    b.style.backgroundImage = "url('raspberry.png')";
  } else if (bstyle == "url('raspberry.png')"){
    b.style.backgroundImage = "url('blueberry.png')";
  } else {
    b.style.backgroundImage = "url('strawberry.png')";
  }
}

For example, this code for changing font-size works perfectly.

function changeSize (){ 
  console.log('changing font size');
  var s = document.getElementById('clock');
  var sstyle = window.getComputedStyle(s, null).getPropertyValue('font-size');
  if (sstyle == "25px") {
    s.style.fontSize = "50px";
  } else{
    s.style.fontSize = "25px";
  }
}

What is the variable `s`? Why is `bstyle` not set to `b.style.backgroundImage`? This is hard to understand without context. — StardustGogeta, Apr 28 '18 at 20:35
After fixing the typo, does the problem persist? If not, this question can be deleted. — StardustGogeta, Apr 28 '18 at 21:04
I think I figured it out. The filepath is converted to an absolute path (rather than relative) when it is computed as CSS, making the comparisons largely useless. I would suggest, then, simply making a counter variable to see how many times the function is called and taking the remainder modulo 3. — StardustGogeta, Apr 28 '18 at 21:24
@StardustGogeta ``. Then I use `let changeBackgroundButton;` to make a variable. Then there is this code in "init" function `changeBackgroundButton = document.querySelector('#change-image'); changeBackgroundButton.addEventListener('click', changeBackground);`. And "init" function works with `window.onload` — Liza, Apr 28 '18 at 21:30

StardustGogeta · Accepted Answer · 2018-04-28T21:41:12.210

var x = 0;
var pics = ['strawberry.png', 'raspberry.png', 'blueberry.png'];
function changeBackground (){
  console.log('change background');
  var b = document.getElementById('mainbody');
  b.style.backgroundImage = 'url('+pics[(x++) % pics.length]+')';
}

I would suggest using a counter variable, as shown above, in order to track the number of times the function is called and update the background accordingly.

The problem that is being experienced is that when JavaScript changes the background image URL, the full absolute path is saved as the computed value in CSS. However, when comparing against it later, this absolute path does not match the relative one that was initially used. Clearly, other attributes, such as font-size, would not experience this same issue.

Thank you very much. This was very helpful. – Liza Apr 28 '18 at 21:40 — Liza, Apr 28 '18 at 21:40

Changing background image through window.getComputedStyle

1 Answers1