Popup does not work when I click on the element responsible for opening it-CodePudding

I'm a beginner and I don't understand why it doesn't work. I have code that allows you to move a circle on the screen. I also need to make a popup appear when clicking on a circle.Also, I want a popup to appear in the middle of the screen when the circle is clicked

I have code that allows you to move a circle. It chooses a random point to move to. Also, I want a popup to appear in the middle of the screen when the circle is clicked

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Circle</title>
</head>
<body>
    <header></header>
    <main>
        <label name="popup" id="popup" ></label>
        <div >
            <input type="checkbox" name="popup" id="popup" >
        </div>
    </main>
    <footer></footer>
    <script src="js/script.js"></script>
</body>
</html>

CSS:

*,*::before,*::after {
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
}
body main html{
    width: 100%;
    height: 100%;
    position: relative;
}
.button {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background: linear-gradient(#e66465, #9198e5);;
    position: absolute;
    transition: linear 4s;
}
.popup {
    display: none;
    width: 1000px;
    background: rgba(61, 55, 61);
    height: 1000px;
    overflow: auto;
    font-size: 1rem;
    padding: 20px;
    position: absolute;
    box-shadow: 0px 0px 10px 0px rgba(61, 55, 61, 0.7); 
    align-self: center;
}
.popup__check {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    cursor: pointer;
    z-index: 3;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.popup__check:checked ~ .popup{
    display: block;
}

JS:

let elem = document.querySelector('.button');

const changePosition = () => {
  let randX = Math.random();
  let randY = Math.random();
  const circleSize = {
    width: elem.clientWidth,
    heigth: elem.clientHeight
  };

  const windowWidth = window.innerWidth - circleSize.width;
  const windowheigth = window.innerHeight - circleSize.heigth;

  let randXMult = windowheigth * randX;
  let randXP = randXMult   'px';
  let randYMult = windowWidth * randY;
  let randYP = randYMult   'px';


  elem.style.left = randYP;
  elem.style.top = randXP;
};


setInterval(changePosition,1000);

CodePudding user response：

It seems like you cant use checkboxes if you use appearance: none.

So you need to do it in JS:

HTML:

<main>
    <div  data-popup="false"></div>
    <label name="popup" id="popup" ></label>
</main>

CSS:

.popup {
    display: none;
    width: 100px;
    background: rgba(61, 55, 61);
    height: 100px;
    overflow: auto;
    font-size: 1rem;
    padding: 20px;
    position: absolute;
    box-shadow: 0px 0px 10px 0px rgba(61, 55, 61, 0.7); 
    align-self: center;
}

.button[data-popup='true']   .popup{
    display: block;
}

JS:

const btn = document.querySelector(".button")

const onClick = () => {
    console.log("onCLick")
    const current = btn.getAttribute("data-popup") == "true";
    btn.setAttribute("data-popup", !current);
}

btn.addEventListener("click", onClick);

CodePudding user response：

This is how it should be done. You can use :checked to determine the state of checkbox, you just need correct CSS selectors and markup. Take a look below:

let elem = document.querySelector('.button');

const changePosition = () => {
  let randX = Math.random();
  let randY = Math.random();
  const circleSize = {
    width: elem.clientWidth,
    heigth: elem.clientHeight
  };

  const windowWidth = window.innerWidth - circleSize.width;
  const windowheigth = window.innerHeight - circleSize.heigth;

  let randXMult = windowheigth * randX;
  let randXP = randXMult   'px';
  let randYMult = windowWidth * randY;
  let randYP = randYMult   'px';


  elem.style.left = randYP;
  elem.style.top = randXP;
};


setInterval(changePosition, 1000);

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
}

main {
  width: 100%;
  height: 100%;
  position: relative;
}

.button {
  width: 200px;
  height: 200px;
  border-radius: 100%;
  background: linear-gradient(#e66465, #9198e5);
  position: absolute;
  transition: linear 4s;
}

.popup {
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(61, 55, 61);
  font-size: 4rem;
  padding: 20px;
  position: fixed;
  left: 0;
  top: 0;
  box-shadow: 0px 0px 10px 0px rgba(61, 55, 61, 0.7);
  justify-content: center;
  align-items: center;
  color: #fff;
}

.popup__check {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  cursor: pointer;
  z-index: 3;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.popup__check:checked .popup {
  display: flex;
}

<main>
  <div >
    <input type="checkbox" name="popup" id="popup" >
    <label name="popup" id="popup" >So you clicked on that thing...</label>
  </div>
</main>