“hiding/showing” elements and change button background-image

Question

This code works great hiding/showing (Iamhiden) only.

HTML:

 <nav id="Iamhiden"></nav>
 <button id="THeSummoner" onclick="toggle_visibility('Iamhiden');"></button>

CSS:

 #Iamhiden{}
 #THeSummoner{
      width: 30px;
      height: 30px;
      background-image: url(../Images/mobile-icon-1.png);
      background-repeat: no-repeat;
      margin: 22px 0px auto 0px;
      padding: 0;
      border-style: none;
      list-style: none;
      background-color: transparent;
}

JS:

function toggle_visibility(Iamhiden) {
   var e = document.getElementById(Iamhiden);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}    

https://app.box.com/s/qy27mxja53tzucyzijbbiuhmd29bn40i https://app.box.com/s/8rom8cax3esmws62aj64p5yhwkeass8k

But I don't want it to hide/show (Iamhiden) I only want it to change the background-image for (THeSummoner).

JS - 2:

function toggle_visibility(Iamhiden) {
   var e = document.getElementById(Iamhiden);
   if(e.style.display == 'block')
      e.style.display = 'none';
      **document.getElementById(THeSummoner).style.background-image=url(../Images/mobile-icon-1.png);**
   else
      e.style.display = 'block';
      document.getElementById(THeSummoner).style.background-image=url(../Images/xmnu.png);
}

I tried JS - 2 but it doesn't work at all.

Answer 1

There is no THeSummoner variable, so you have to specify the element Id as string, not as variable:

document.getElementById('THeSummoner')

Now you can change the background image of the element like this:

document.getElementById('THeSummoner').style.backgroundImage = "url('type_path_here')";

Here is an example: http://jsfiddle.net/42joe84p/2/