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

Question

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.

First of all, = will assign the value to the variable. You want to use == when you are checking for equality. — forgivenson
– forgivenson, Commented Aug 4, 2015 at 19:44
Second, I'm not sure what you are trying to do with those for loops. You probably just want to use if statements. Third, that if statement you show should be if (document.getElementById("Menu_button").style.cssText == "align-self:flex-end;"). Fourth, you should use the debugger in your browser and set a break point at that if statement, and see what cssText actually equals. — forgivenson
– forgivenson, Commented Aug 5, 2015 at 11:27
Ok @forgivenson , why is this wrong, that is why it doesn't work: <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <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]; if (Element.style.backgroundColor == "pink") { Element.style.backgroundColor = "red"; } } </script> </body> </html> — Slit
– Slit, Commented Aug 5, 2015 at 14:53

Slit · Accepted Answer · 2015-08-07 14:02:02Z

1

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.

answered Aug 7, 2015 at 14:02

Slit

5111 gold badge8 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related