Opacity change with js not functioning as expected-CodePudding

Im trying to get this sub menu to fade in and out at the press button however it doesn't seem to be functioning properly as expected. Its supposed to fade in completely after short while after you click 'help' as well as fade out completely after a short while when you click 'back'. Does this happen to be a problem with the method inside of which im making it fade out or weird bug with opacity?

function closepopup(ele) {
  ele.parentElement.style.opacity = 1;
  let interval = setInterval(() => {
    ele.parentElement.style.opacity -= 0.1;
    if(ele.parentElement.style.opacity <= 0){
      ele.parentElement.style.display = 'none';
      clearInterval(interval);
    }
  }, 50);
}

function openpopup(eleid){
  let ele = document.getElementById(eleid)
  ele.style.opacity = 0
  ele.style.display = 'flex';
  let interval = setInterval(() => {
    ele.style.opacity  = 0.1;
    if(ele.style.opacity >= 1){
      clearInterval(interval);
    }
  }, 50);
}

body{
  background: #93E9BE;
}
.wrapper{
  display: flex;
  width: 100%;
  height:100%;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  flex-direction:column;
}
.buttons{
  display: flex;
  width: 50%;
  height:40%;
  margin: auto;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  flex-direction:column;
}
button{
  width:50%;
  height:25%;
  background:#a68e72;
  border-style:solid;
  border-color:#8a7154;
  border-radius:1vmax;
  transition: 0.5s;
  font-size:2vmax;
  color:rgba(0,0,0,0.5);
}
button:hover{
  transform:scale(1.1);
  filter:brightness(1.25);
  box-shadow:0px 0px 30px -3px #000000;
}
button:active{
  transform:scale(0.95);
  filter:brightness(0.95)
}
.popupmenu{
  display:none;
  flex-direction: column;
  position:absolute;
  top:15%;
  left:15%;
  width:70%;
  height:70%;
  background:#a68e72;
  border-style:solid;
  border-color:#8a7154;
  border-radius:1vmax;
  padding:2%;
  font-size:2vmax;
  overflow-y:auto;
  overflow-x:hidden;
}
.popupexitbutton{
  margin:auto;
  width:70%;
  height:70%;
}

<body>
<div >
<div >
  <button>Play</button>
  <button>Settings</button>
  <button onclick="openpopup('help')">Help</button>
</div>
</div>
<div id="help" >
  <p>
    To recive support ask for help in the discord, or ask a user during a match using the chat feature.
  </p>
  <button  onclick="closepopup(this)">
    Back
  </button>
</div>
</body>

CodePudding user response：

The issue is that ele.style.opacity is a string and you are adding a number to the string.

To fix this problem you can convert ele.style.opacity to number

ele.style.opacity = Number(ele.style.opacity)   0.1;

Working example below

function closepopup(ele) {
  ele.parentElement.style.opacity = 1;
  let interval = setInterval(() => {
    ele.parentElement.style.opacity -= 0.1;
    if(ele.parentElement.style.opacity <= 0){
      ele.parentElement.style.display = 'none';
      clearInterval(interval);
    }
  }, 50);
}

function openpopup(eleid){
  let ele = document.getElementById(eleid)
  ele.style.opacity = 0
  ele.style.display = 'flex';
  let interval = setInterval(() => {
    ele.style.opacity = Number(ele.style.opacity)   0.1;
    if(ele.style.opacity >= 1){
      clearInterval(interval);
    }
  }, 50);
}

body{
  background: #93E9BE;
}
.wrapper{
  display: flex;
  width: 100%;
  height:100%;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  flex-direction:column;
}
.buttons{
  display: flex;
  width: 50%;
  height:40%;
  margin: auto;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  flex-direction:column;
}
button{
  width:50%;
  height:25%;
  background:#a68e72;
  border-style:solid;
  border-color:#8a7154;
  border-radius:1vmax;
  transition: 0.5s;
  font-size:2vmax;
  color:rgba(0,0,0,0.5);
}
button:hover{
  transform:scale(1.1);
  filter:brightness(1.25);
  box-shadow:0px 0px 30px -3px #000000;
}
button:active{
  transform:scale(0.95);
  filter:brightness(0.95)
}
#help{
  display:none;
  flex-direction: column;
  position:absolute;
  top:15%;
  left:15%;
  width:70%;
  height:70%;
  background:#a68e72;
  border-style:solid;
  border-color:#8a7154;
  border-radius:1vmax;
  padding:2%;
  font-size:2vmax;
  overflow-y:auto;
  overflow-x:hidden;
}
.popupexitbutton{
  margin:auto;
  width:70%;
  height:70%;
}

<body>
<div >
<div >
  <button>Play</button>
  <button>Settings</button>
  <button onclick="openpopup('help')">Help</button>
</div>
</div>
<div id="help" >
  <p>
    To recive support ask for help in the discord, or ask a user during a match using the chat feature.
  </p>
  <button  onclick="closepopup(this)">
    Back
  </button>
</div>
</body>