Javascript checkbox to change background not working

Question

I'm trying to change the background position of an element using a checkbox, but is not working.

Here is the code:

x = false;

function Check() {
  if (x) {
    document.getElementById("checkboz").style.backgroundPosition = '0 0';
    document.getElementById("checkboz").style.backgroundPosition = '-28px 0';
    x = false;
  } else {
    document.getElementById("checkboz").style.backgroundPosition = 'none';
    document.getElementById("checkboz").style.backgroundPosition = '0 0';
    x = true;
  }

}

#checkboz {
  background: url(http://movimientomore.com/images/2016/12/21/sprite-check-01.png);
  background-size: 55px;
  background-repeat: no-repeat;
  width: 28px;
  height: 28px;
}

<div id="checkboz" class="checkbox">
  <label for="modlgn-remember">
    <input id="modlgn-remember" name="remember" class="inputbox" value="yes" type="checkbox">Recordarme</label>
</div>

Thank you so much for your help :)

Answer 1

I have updated your fiddle to show a working version of the functionality you are seeking.

Your fiddle

Like others have said in the comments, the Check function was never being called, but additionally, it is better to swap classes out on the elements instead of trying to manually manipulate the styles.

    var element = document.getElementById('modlgn-remember');
    element.addEventListener('click', function(e) { 
        console.log(element.checked)
        Check(element.checked);
    }, false);
    x=false;
    function Check(checked){
      console.log(x);
      var $el = document.getElementById("checkboz")
      if(checked){
        $el.className = $el.className.replace(' remove-background- position-1 remove-background-position-2', '');  
        $el.className += ' add-background-position-1 add-background-position-2';
       x=false;
      } else {
        var cn = $el.className;
        cn = $el.className.replace(' add-background-position-1 add-background-position-2', '');  
        $el.className = cn;
        $el.className += ' remove-background-position-1 remove-background-position-2';
        x=true;    
      }  
   }

With the following css classes:

    .add-background-position-1 {
      background-position: 0 0 !important;
    }

    .add-background-position-2 {
      background-position: -28px 0 !important;
    }
    .remove-background-position-1 {
      background-position: inherit !important;
    }
    .remove-background-position-2 {
      background-position: 0 0 !important;
    }

without the !important on the css classes the existing background style will take precedence over the new classes.

I hope that help!

Answer 2

You don't have an eventlistener or onclick in your code.

document.getElementById("checkboz").addEventListener("click", Check);

x=false;
function Check(){
  x=!x;
  if(x){    
    document.getElementById("checkboz").style.backgroundPosition='0 0';
    document.getElementById("checkboz").style.backgroundPosition='-28px 0';
  }
  else{
    document.getElementById("checkboz").style.backgroundPosition='none'; 
    document.getElementById("checkboz").style.backgroundPosition='0 0';   
  }


}
document.getElementById("checkboz").addEventListener("click", Check);

#checkboz{
  background: url(http://movimientomore.com/images/2016/12/21/sprite-check-01.png);
  background-size: 55px;
  background-repeat: no-repeat;
  width: 28px;
  height: 28px;
}

<div id="checkboz" class="checkbox">
  <label for="modlgn-remember"><input id="modlgn-remember" name="remember" class="inputbox" value="yes" type="checkbox">Recordarme</label>
</div>

Or view on jsfiddle.net

Read up: EventTarget.addEventListener() - Web APIs | MDN