Q:

button to hide background animation

I'm searching for a way to get this working:
I want to have a button on a site, which controls the background animation.  It should "fade out" (directly, no latency) the whole background animation by click, but by clicking again, it should "fade in". 
I tried this:

if (document.querySelector('. Welle').style.display == 'none'){
    document.querySelector('. Welle').style.display = 'block';
}
else {
    document.querySelector('. Welle').style.display = 'none';
}
<a type="button" value="Klicken um Hintergrundanimation zu beenden" onclick="backgroundbutton()" style="text-decoration: none;">
    <button>
        Hintergrund
    </button>
</a>

but it didn't work, what am I doing wrong?  Could someone correct me? 
Thanks a lot

A:

var Welle = document.querySelector('. Welle');

function backgroundbutton() {
  // if the display is "none", we return "block", else we return "none"
  var dp = (Welle.style.display == 'none') ? ' block' : 'none';
  Welle.style.display = dp;
}
body { margin: 0; padding: 0 }

.Welle {
  width: 100%;
  height: 100vh;
  background: yellow url('http://wallpapercave.com/wp/pwQMS6f.jpg') no-repeat;
  background-size: cover;
  z-index: -1;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
}
<div class="Welle"></div>
<button onclick="backgroundbutton()">Hintergrund</button>

