<div id="btn" onclick="toggletopmenu()"></div>
        
<script>
function toggletopmenu() 
  {
  var x = document.getElementById('header')
   ;
  if (x.style.backgroundImage !== "url('images/heading.png')")
    {
    x.style.backgroundImage = "url('images/headermenu.png')";    
    } 
  else 
    {
    x.style.backgroundImage = "url('images/heading.png')";
    }
  }
</script>

For some reson this switches the background once only, then the button does nothing. It acts like even though the url is correct for comparison, it cannot confirm that.

<div id="btn" onclick="toggletopmenu()"></div>
        
<script>
function toggletopmenu() 
  {
  var x = document.getElementById('header')
   ;
  if (x.style.backgroundImage !== "url('images/heading.png')")
    {
    x.style.backgroundImage = "url('images/headermenu.png')";    
    } 
  else 
    {
    x.style.backgroundImage = "url('images/heading.png')";
    }
  }
</script>

For some reson this switches the background once only, then the button does nothing. It acts like even though the url is correct for comparison, it cannot confirm that.

• javascript
• html
• css

• 2 Change the !== to ==. – 001 Commented Feb 6 at 21:11
• 2 ...and find a style guide. Your code formatting makes it hard to read. – 001 Commented Feb 6 at 21:12
• i changed to == and now it does nothing – goo Commented Feb 6 at 21:16
• 2 @goo: If the if condition isn't doing what you expect, have you debugged to observe what value you're comparing the string literal to? Is that value exactly what you expect it to be? – David Commented Feb 6 at 21:19
• 1 no, you don't une any style, see en.wikipedia.org/wiki/Programming_style and en.wikipedia.org/wiki/Indentation_style – Mister Jojo Commented Feb 6 at 21:19

3 Answers 3

Prefer to use a class
with a js classList.toggle()

const
  e_btn = document.querySelector('#btn')
, e_hdr = document.querySelector('#header')
  ;
e_btn.addEventListener('click', () =>
  {
  e_hdr.classList.toggle('menuClass');
  })

#header
  {
  width               : 100%; 
  height              : 302px; 
  background-image    : url("https://picsum.photos/id/538/500/300"); 
  background-position : top center; 
  background-repeat   : no-repeat; 
  z-index             : 10; 
  top                 : 0px;
  }
#header.menuClass
  {
  background-image    : url("https://picsum.photos/id/1062/500/300"); 
  }

<button id="btn"> toggle menuClass </button>
<br><br>
<div id="header"></div>

Your if else statement logic is broken. Change !== to == to make sure you're toggling between the two images. Right now, your if statement and your else statement BOTH sets the header background to headermenu.png.

Also, interchange the single quotes and double quotes by changing the following:

x.style.backgroundImage = "url('images/heading.png')"

to this:

x.style.backgroundImage = 'url("images/heading.png")'

Also, avoid using inline scripts and use an event listener instead like this:

document.querySelector('#btn').addEventListener('click', () => {
  const x = document.querySelector('#header');
  if (x.style.backgroundImage == 'url("images/heading.png")'){
    x.style.backgroundImage = 'url("images/headermenu.png")';
  } else {
    x.style.backgroundImage = 'url("images/heading.png")';
  }    
});

<div id="btn">Click</div>

As an alternative to JavaScript you can also use a checkbox with a parent label element. And then style the menu to show when the checkbox is checked.

To hide the checkbox I use opacity: 0 so that the button still can be focused if you don't use the mouse to click the label element.

label#btn {
  display: block;
  width: 50px;
  height: 50px;
  background-color: silver;
  border-radius: .2em;
  cursor: pointer;
}

label#btn input {
  opacity: 0;
}

label#btn:has(input:focus) {
}

label#btn:has(input:checked) {
  background-color: gray;
}

menu {
  padding: 0;
}

menu ul {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

menu:has(input:checked) ul {
  display: block;
}

<menu>
  <label id="btn"><input type="checkbox"></label>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</menu>