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) {

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.




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

Simple example:

<!DOCTYPE html>
h1 {

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


You get value in rgb form.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.