Question 232435 in Html Question posted in
Some basic documentation can be found here.

Html – Why does this if statement keep running?

Really confused by this. The console logs make it seem like it has a mind of its own. Just added the toFixed part to see if it would help but it doesn’t change anything.

function displayNextReview() {

  let reviewItem = document.getElementById("review-item-" + a);

  if (reviewItem) {
    reviewsList.appendChild(reviewItem);
    if (reviewsList.clientHeight.toFixed() < document.getElementById("container").clientHeight.toFixed()) {
      a++;
      displayNextReview();
      console.log("reviewsList: " + reviewsList.clientHeight + " container: " + document.getElementById("container").clientHeight);
    }
    reviewItem.style.display = 'block';
    $(reviewsList).animate({
      opacity: '1'
    }, 700);
    a++;
    if (a >= merged.length) {
      a = 0;
    }
  }

}

Here are the console logs:

reviewsList: 0 container: 528
reviewsList: 107 container: 528
reviewsList: 244 container: 528
reviewsList: 349 container: 528
reviewsList: 438 container: 528
reviewsList: 527 container: 528
reviewsList: 632 container: 528
reviewsList: 757 container: 528
reviewsList: 878 container: 528
reviewsList: 999 container: 528
reviewsList: 1136 container: 528
reviewsList: 1273 container: 528
reviewsList: 1378 container: 528
reviewsList: 1611 container: 528
reviewsList: 1748 container: 528
reviewsList: 1853 container: 528
reviewsList: 1974 container: 528
reviewsList: 2175 container: 528
reviewsList: 2280 container: 528
reviewsList: 2385 container: 528
reviewsList: 2634 container: 528
reviewsList: 2787 container: 528
reviewsList: 3020 container: 528
reviewsList: 3205 container: 528
reviewsList: 3342 container: 528
reviewsList: 3463 container: 528
reviewsList: 3568 container: 528
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    It ended up being an issue with the reviewslist having a clientHeight of 0 at the point of the if statement. Not sure how it was doing this, but the reviewItems were on display: none which is why they had no height. Just had to rework it to not use display: none.


  2. 0

    The .toFixed() method will convert numbers to strings

    var num = 15;
console.log(typeof num, num);

var fixed = num.toFixed();
console.log(typeof fixed, fixed);

    This will break your comparison logic, or at least not be consistent!

    I recommend using Math.floor to round down these numbers to a whole number instead. Here’s a quick demo of how that works in case you aren’t familiar.

    var num = 15.9999;

console.log(
  num,
  Math.floor(num)
);

    Here’s how you can use it

    function displayNextReview() {
  let reviewItem = document.getElementById("review-item-" + a);

  if (reviewItem) {
    reviewsList.appendChild(reviewItem);
    
    var reviewListHeight = Math.floor(reviewsList.clientHeight);
    var containerHeight = Math.floor(document.getElementById("container").clientHeight);
    
    if (reviewListHeight < containerHeight) {
      a++;
      displayNextReview();
      console.log("reviewsList: " + reviewListHeight + " container: " + containerHeight);
    }
    
    reviewItem.style.display = 'block';
    
    $(reviewsList).animate({
      opacity: '1'
    }, 700);
    a++;
    
    if (a >= merged.length) {
      a = 0;
    }
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search