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

Html – The conditional code is running without checking the condition

I am trying to hide an element if the mousedown event gets triggered on body but don’t want it to hide if another element is clicked. The code is working fine if I don’t use the logical or Operator and use only one condition.

.aa{
    position: absolute;
    top: 7rem;
    left: 5rem;
    width:20rem;
    height: 20rem;
    background-color:rgba(39, 139, 69, 0.733) ;
}
button{
    position: relative;
    top: 8rem;
    left: 8rem;
    background-color: #f0ff1f;
    border: none;
    padding: 1rem;
    width: 5rem;
    color: rgb(255, 255, 255);

}
button:active{
    background-color: #565c0b;
}
.da{
    position: absolute;
    top: 8rem;
    left: 30rem;
    width: 15rem;
    height: 15rem;
    background-color:rgba(1, 111, 255, 0.733) ;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body style="background-color: rgb(47, 53, 54);">
   <div class="aa"><button>button</button></div>
   <div class="da"></div>
    <script>
document.onmousedown =function(event){
    
    if(event.target.tagName!='BUTTON'  ||  event.target.className!='aa')
      document.getElementsByClassName('da')[0].style.display = 'none';
console.log(event.target.className!='da' || event.target.tagName!='BUTTON')
console.log(event.target.tagName, event.target.className)}

    </script>
</body>

</html>
Tags:

2

Answers


  1. 0

    maybe try this js code ?

    document.onmousedown = function (event) {
  // Hide .da only if the clicked element is NOT a BUTTON AND 
  //NOT an element with class 'aa'
  if (event.target.tagName !== 'BUTTON' && event.target.className !== 'aa') {
     document.getElementsByClassName('da')[0].style.display = 'none';
  }
};
    Login or Signup to reply.
  2. 0

    I am trying to hide an element if the mousedown event gets triggered on body but don’t want it to hide if another element is clicked

    In this case is not clear why you used the approach of checking if the event.target is not of some given types instead of just checking if it’s exactly the document root.

    https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement

    The documentElement read-only property of the Document interface
    returns the Element that is the root element of the document (for
    example, the element for HTML documents).

    document.addEventListener('mousedown',  function(event) {    
  if (event.target === document.documentElement) {
     document.querySelector('.da').style.display = 'none'; 
  }
});
    .aa {
  position: absolute;
  top: 7rem;
  left: 5rem;
  width: 20rem;
  height: 20rem;
  background-color: rgba(39, 139, 69, 0.733);
}

button {
  position: relative;
  top: 8rem;
  left: 8rem;
  background-color: #f0ff1f;
  border: none;
  padding: 1rem;
  width: 5rem;
  color: rgb(255, 255, 255);

}

button:active {
  background-color: #565c0b;
}

.da {
  position: absolute;
  top: 8rem;
  left: 30rem;
  width: 15rem;
  height: 15rem;
  background-color: rgba(1, 111, 255, 0.733);
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body style="background-color: rgb(47, 53, 54);">
  <div class="aa"><button>button</button></div>
  <div class="da"></div>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search