If statement with element.height-CodePudding

Welcome to all,

Today I was trying to do an IF statement that with element.style.height == '0' goes to true and if it's not, goes to false. This is not working though, even if the height is in fact changing on CSS. I read about some element.ClientHeight or .getBoundingClientRect() (which gives me the info about that particular element). With ClientHeight, if I use a console.log() in my True Statement, even if the height of the container is not 0, because I can see that on my website, the value on the console is always 0. If I use the .getBoundClientRect().height, the value is changing and working perfectly, but even if I use in my IF statement the condition of .getBoundClientRect().height == '0', even if the height is not 0 because the container height is on his 100%, it's not leaving that true statement and it's not going to the false statement.

My whole JS (after some changes and trying to get it work) is this:

let RequestButton = document.getElementById('RequestButton');
let RequestSection = document.getElementById('RequestSection');

if (RequestSection.getBoundingClientRect().height == '0') {
  RequestButton.addEventListener("click", function() {
    window.scrollTo(0, 0);
    RequestSection.style.height = '100%'
    RequestSection.style.padding = '20px 0px'
    console.log(RequestSection.getBoundingClientRect().height)
  });
} else if (RequestSection.getBoundingClientRect().height == '121') {
  RequestButton.addEventListener("click", function() {
    console.log('it works')
  });
}

CodePudding user response：

Changing the hight inside the if() statement won't make your code 'leave' that if statement, because it is not called again. What you can do is put it inside a function and then call that function again from within the if() statement:

function checkHeightAndDoSomething(){
    if (RequestSection.getBoundingClientRect().height === 0) {
        RequestButton.addEventListener("click", function () {
          window.scrollTo(0, 0);
          RequestSection.style.height = "100%";
          RequestSection.style.padding = "20px 0px";
          console.log(RequestSection.getBoundingClientRect().height); // check in your console if the hight has indeed changed
          checkHeightAndDoSomething(); // If the height has changed and you call the code again. It should go to your else if
        });
      } else if (RequestSection.getBoundingClientRect().height === 121) {
        RequestButton.addEventListener("click", function () {
          console.log("it works");
        });
      }
}

This however is not a great idea, because you might get stuck in a loop if the height is not changed, but I am not sure what you are trying to accomplish. This is just for demonstrative purposes. Also: RequestSection.getBoundingClientRect().height gives you an integer. Right now you are comparing it to a string ("0"). This works, because you are using shallow compare ==. This is a bad practice and it is better to compare it to an int with ===. So: (RequestSection.getBoundingClientRect().height === 0).

CodePudding user response：

Assuming no other CSS, when you set the padding to 20px on the top and bottom, the new height will become 40 not 121.

Also, you don't need two different click handlers, you can have just one and have an if statement inside of it.

let RequestButton = document.getElementById('RequestButton');
let RequestSection = document.getElementById('RequestSection');

RequestButton.addEventListener("click", function() {

if (RequestSection.getBoundingClientRect().height === 0) {
    window.scrollTo(0, 0);
    RequestSection.style.height = '100%'
    RequestSection.style.padding = '20px 0px'

  } else if (RequestSection.getBoundingClientRect().height === 40) {
    console.log('it works')
  }

  console.log(RequestSection.getBoundingClientRect().height)
});

#RequestSection {
  background: red;
}

<button id="RequestButton">Test</button>
<section id="RequestSection"></section>