How do I constantly check if my if statement returns true or false

Question

I am trying to constantly check for any update on the page. I want to influence the second object on the page by checking if the user clicks a button that makes first object display as a block

So user click button > first object displays block > the second object should move. how do I constantly check for any changes in Javascript?

I currently have this

const button = document.querySelector("button")
const firstObject = document.querySelector(".first-object")

button.addEventListener("click", function(){
   if(firstObject.style.display === "none"){
      firstObject.style.display = "block"
    } else { 
      firstObject.style.display = "none"
    }
})

So this sets the ".first-object" div to block or hides it, Now I want my second div to get a margin-top of 50px when the ".first-object" is set to block and so I added this

    const secondObject= document.querySelector(".second-object")

    if (firstObject.style.display == "block"){
        secondObject.style.marginTop = "50px";
    } else {
        secondObject.style.marginTop = "0";
    }

But this part doesnt constantly check if the other value returns true. How do I achieve this?

Sorry for my noobish question and thanks in advance!

Here is a jsfiddle link for the part I am trying to achieve. https://jsfiddle.net/wvy7rhuc/

PS: fixed the type error on from

if (firstObject.style.display = "block")

to

if (firstObject.style.display === "block")

Answer 1

You have a simple typo –

if (object.style.display = "block"){

is an assignment and will be truthy and

if (object.style.display == "block"){

is the comparison you're looking for.

Answer 2

The above answer by @AKX is correct and I want to give you some extra explanation.

In JavaScript,

 = is used for assigning values to a variable.
 == is used for comparison between two variables irrespective of the datatype of variable.
 === is used for comparison between two variables but this will check strict type, which means it will check datatype of two values.

Let's see the above in examples.

 var number = 100;  // Here 100 is assigned using to variable using =

 **Example of ==**

 if (number == 100)  // Here comparison between two values using ==. It will compare irrespective of datatype of variable
     alert("Both are equal");    
 else    
     alert("Both are not equal");   

 **Example of ===**

 if (number === 100)  // Here comparison is happening between two values using ===. It will compare strictly means it will check datatype as well.
     alert("Both are equal");      
 else      
     alert("Both are not equal"); 

Answer 3

I believe that you should place the second (if) statement inside the event listener which will allow the (if) statement to constantly check both (if) statements.

Here is my suggestion JS code.

    const button = document.querySelector("button")
    const firstObject = document.querySelector(".first-object")
    const secondObject = document.querySelector(".second-object")
    
    button.addEventListener("click", function(){
       if(firstObject.style.display === "block"){
          firstObject.style.display = "none"
        } else { 
          firstObject.style.display = "block"
        }
        
        if (firstObject.style.display == "block"){
          secondObject.style.marginTop = "50px";
        } else {
          secondObject.style.marginTop = "0";
        }
    })