Question 44665 in Html Question posted in
Some basic documentation can be found here.

How can I make a div appear on the click of a button – Html

I wanted to darken the screen on button press but I can’t figure out how.
I tried making in image show when the shop is open, and close when it’s closed. I made a div to darken the screen with the following class:

How would I fix this and how can I make it better?

I wanted d-show to enable when shopOpen is true, and disapear when it’s false.

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()" />
Tags:

2

Answers


  1. 0

    {display: none;}

    means the element takes up no space so the height, width, opacity and background properties provided are irrelevant

    Login or Signup to reply.
  2. 0

    You toggle the hidden attribute on an element to do that.

    <button onclick="document.querySelector('div').toggleAttribute('hidden')">click me
</button>
<div style="height:32px; width:32px; background-color:black"> </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search