我想在按下按钮时使屏幕变暗，但我不知道怎么做。我试着在商店开门时显示图像，在商店关门时关闭图像。我用下面的类做了一个div来使屏幕变暗：
我该怎么解决这个问题，怎么才能让它变得更好？
我希望d-show在shopOpen为真时启用，在为假时消失。

var shopOpen = false;
var d = document.getElementById("darken")
d.classList.add('darken');
d.classList.remove('d-show')

function toggleShop() {
  if (shopOpen = false) {
    d.classList.toggle('d-show');
    d.classList.toggle('darken');
    shopOpen = true;
  }
  if (shopOpen = true) {
    d.classList.toggle('darken');
    d.classList.toggle('d-show');
    shopOpen = false;
  } else {
    console.log("an error has occured while displaying 'darken'")
  }
}

.darken {
  display: none;
  opacity: 0%;
  position: absolute;
  top: 0%;
  left: 0%;
  background: rgba(0, 0, 0, 0.5);
  height: 100vh;
  width: 100vw;
  z-index: 90;
}

.d-show {
  display: block;
  opacity: 100%;
}

<div class="darken" id="darken"></div>
<div class="header">
  <h1 id='scrdisp' class='score'></h1>
</div>
<div class="cookieholder">
  <img src="assets/cookie.png" class="cookie" id="cookie" onclick="
            score = score + 1; 
            document.getElementById('scrdisp').innerHTML = score;
            var r = document.querySelector(':root');
            var ck = document.getElementById('cookie')
            ck.classList.remove('cookie-wtAni')
            var rV = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('--🍪hxw').replace('px', ''));
            var aT = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('--🍪ani').replace('px', ''));
            /* r.style.setProperty('--🍪hxw', rV + 15 + 'px');
            setTimeout(() => { r.style.setProperty('--🍪hxw', '250px'); }, 50); */
            ck.classList.add('cookie-wtAni');
            setTimeout(() => { ck.classList.remove('cookie-wtAni'); }, aT);
         " />
</div>
<img src="assets/shop.png" id="shopBtn" class="shopBtn" onclick="toggleShop()" />