CODEWITHSUNDEEP
javascriptcss
Slit
Slit

Reputation: 501

Use style property of an element as condition in if or for loop javascript

I am having problems understanding condition in If statement [or For lopp]. I created div that plays like Menu button. When I click that div all menu including this Menu button is shown but also text [paragraph inside div] changes to "Close menu". I tried to make some if condition in function that is fired up when I click Menu button but it looks like if condition doesn't work like I want to. Here is an example in for loop:

function Show_mobile_menu() {
for (;  document.getElementById("Menu_button").style.cssText ="align-self:flex-end;" ; ) {
Func1(); }
}
for (; document.getElementById("Menu_button").style.cssText ="align-self: center;"; ) {
Func2(); }
}

function Func1() {
    document.getElementById("Menu").style.display = "flex";
    document.getElementById("Submenu").style.display = "flex"; 
    document.getElementById("Menu_button").style.cssText ="align-self: center;"
    document.getElementById("Menu_button").getElementsByTagName("P")[0].innerHTML ="Close";   
}

function Func2() {
    document.getElementById("Menu").style.display = "none";
    document.getElementById("Submenu").style.display = "none"; 
    document.getElementById("Menu_button").style.cssText ="align-self: flex-end;"
    document.getElementById("Menu_button").getElementsByTagName("P")[0].innerHTML ="Menu"; 
}

Of course same thing is with if condition:

   if ( document.getElementById("Menu_button").style.cssText ="align-self:flex-end;" == true) {
        Func1();
    }

I tried the same with if textContent = "Menu" then do that... But nothing. As you can see I am learning JavaScript and syntax and meaning still isn't quite clear. I hope someone could clear things up for me.

Upvotes: 0

Views: 6592

Answers (1)

Slit
Slit

Reputation: 501

SOLUTION

If you want get style of an element you have to use proper methods. I found it on MDN site.

Simple example:

<!DOCTYPE html>
<html>
<style>
h1 {
background-color:pink;
}
</style>
<body>

<button type="Button" onclick="Test();">Click me!</button>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<script>
function Test() {
var element = document.getElementsByTagName("h1")[0];
var stil = window.getComputedStyle(element).getPropertyValue("background-color"); 
    if (stil == "rgb(255, 192, 202)") {
        alert("OK");
    } else {
        alert("Not ok")
    }

}
</script>
</body>
</html>

You get value in rgb form.

Upvotes: 1

Related Questions