If statement to check css property not working

user_10152307 0
Viewed 403

I have a div that displays a little popup menu when clicked. I want users to be able to click anywhere in the body of the site to close the popup, but when I add code for that, the popup cant be opened at all anymore.

So I tried adding an if-statement so that the closemenu() function will only try close the popup if its already open, but it seems like the statement is evaluating to false even if the popup is open.

Here is the HTML for showing the popup:

    <div class="popcolor" onclick="showmenu()"> Click!
        <span class="popupcolor" id="myPopup">Pop!</span>
    </div>

Here is the css:

    .popcolor .show {
        visibility: visible;
        -webkit-animation: fadeIn 0.5s;
        animation: fadeIn 0.5s;
    }

Here is the Javascript:

function showmenu() {
    var popup = document.getElementById("myPopup");
    popup.classList.toggle("show");
}

function closemenu() {
    var popup = document.getElementById("myPopup");
    if (popup.style.visibility == "visible") {
        popup.classList.toggle("close");
    };
}

Here is the HTML for closing the popup:

<body onclick="closemenu()">

I've been through every post I can find on this for solutions, and I'm still stuck. Any help is appreciated.

css html javascript
4 Answers

You can use the getComputedStyle() method on the window object, to calculate the style rules that result from the classes applied to your popup element.

This gives you a reliable way of determining the values of different styling rules that result from, say, the 'close' class being applied to popup

Something along the lines of this should work for you:

function closemenu() {

    var popup = document.getElementById("myPopup");

    // Get the computed style, that is the combination of styles 
    // resulting from your CSS classlist, etc
    var computedStyle = window.getComputedStyle(popup, null); 

    // Get visibility value from computed styles
    var visiblityValue = computedStyle.getPropertyValue("visibility")

    if (visiblityValue == "visible") {
        popup.classList.toggle("show"); // Correct this from "close" to "show"
    };
}

There are also some other functional issues with your implementation which are causing problems. Consider updating your showmenu() method to:

function showmenu(event) {

    // Prevent event propagation, which would cause closemenu to call 
    // after this method is called
    event.stopPropagation()

    var popup = document.getElementById("myPopup");
    popup.classList.toggle("show");
}

For more information on getComputedStyle(), see the MDN documentation

user_85267050

Problem here is that click event triggered from div bubbles up to body which eventually closes the popup.

function showmenu(e) {
  e.stopPropagation();
  console.log('toggle');
  document.getElementById("myPopup").classList.toggle("close");
}

function closemenu(e) {
  e.stopPropagation();
  console.log('hide');
  document.getElementById("myPopup").classList.add("close");
}
#myPopup.close {
  visibility: hidden;
}

body {
  border: 1px solid #ccc;
  padding: 2rem;
}
<body onclick="closemenu(event)">
  <div class="popcolor" onclick="showmenu(event)"> Click!
    <span class="popupcolor close" id="myPopup">Pop!</span>
  </div>
</body>

P.S. Use event.stopPropagation() to cancel/consume event

Admin1

Because the visibility property is being set at the class level, the style information isn't available in the style property of your element. Maybe instead of checking for a specific style, you can check to see if the 'show' class is currently assigned to your element like so:

function closemenu() {
    var popup = document.getElementById("myPopup");
    if (popup.classList.contains("show")) {
        popup.classList.toggle("close");
    };
}
user_74074340

Problem in your code is with the use of JavaScript functions.

Try this simple example I took from W3Schools and enhanced it for your case. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_add_class

There seems to be some issue with W3CSchool TryIt Editor page. Here is the link to JSBin for the same code: https://jsbin.com/xefolinape/edit?html,output

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mystyle {
  width: 100%;
  padding: 25px;
  background-color: coral;
  color: white;
  font-size: 25px;
  box-sizing: border-box;
}
</style>
</head>
<body>

<p>Click the "Try it" button to add the "mystyle" class to the DIV element:</p>

<button onclick="myFunction()">Try it</button>

<button onclick="myFunctionClose()">Close it</button>

<script>
function myFunction() {
   var element = document.getElementById("myDIV");
   element.classList.add("mystyle");
}
function myFunctionClose() {
   var element = document.getElementById("myDIV");
   element.classList.remove("mystyle");
}

</script>

</body>
</html>

Hope this helps!

user_102302500
Related