Why variable declare outside function is not accessing inside function in jquery?

Question

When the page loaded,I want to display only two comments at first.But when i clicked on the button ,i want to increase the display number of comments by two.But nothing happen as my wish.I have tried but my code is not working.It work reverse as i want.I display all the comments when page loaded and display only two comments when i click on button.Any ideas how i can fix this bugs.Thanks is advance...

Here is demo code...

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<style type="text/css">
.d-none {
  display:none;
}
</style>
<body>
  <div class="post">
    <div class="post-comment">
      <button class="view_next_comment">View Only Limited</button>
      <h1>This is comment one.</h1>
    </div>
    <div class="post-comment">
      <h1>This is comment two.</h1>
    </div>
    <div class="post-comment">
      <h1>This is comment three.</h1>
    </div>
    <div class="post-comment">
      <h1>This is comment two.</h1>
    </div>
    <div class="post-comment">
      <h1>This is comment three.</h1>
    </div>
    <div class="post-comment">
      <h1>This is comment two.</h1>
    </div>
    <div class="post-comment">
      <h1>This is comment three.</h1>
    </div>
    <div class="post-comment">
      <h1>This is comment two.</h1>
    </div>
    <div class="post-comment">
      <h1>This is comment three.</h1>
    </div>
    <div class="post-comment">
      <h1>This is comment two.</h1>
    </div>
    <div class="post-comment">
      <h1>This is comment three.</h1>
    </div>
  </div>

  <div class="post">
    <div class="post-comment">
      <button class="view_next_comment">View Only Limited</button>
      <h1>This is comment one.</h1>
    </div>
    <div class="post-comment">
      <h1>This is comment two.</h1>
    </div>
    <div class="post-comment">
      <h1>This is comment three.</h1>
    </div>
    <div class="post-comment">
      <h1>This is comment two.</h1>
    </div>
    <div class="post-comment">
      <h1>This is comment three.</h1>
    </div>
    <div class="post-comment">
      <h1>This is comment two.</h1>
    </div>
    <div class="post-comment">
      <h1>This is comment three.</h1>
    </div>
    <div class="post-comment">
      <h1>This is comment two.</h1>
    </div>
    <div class="post-comment">
      <h1>This is comment three.</h1>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript">
    let start1=0;
    let limit = 2;
    function show_few_comments(start1,limit){
      $('.post').each(function(){
        var comments = $(this).find('.post-comment');
        var comments_length = comments.length;
    //alert(limit)
    if( comments_length > limit ){
      for( var start1=0; start1<comments_length; start1++ ){
        if(start1>=limit){
          $(comments[start1]).addClass('d-none');
        }
      }
    }
  })
    }
    $(document).on('click','.view_next_comment',function(){
      var start1 =start1+limit;
      show_few_comments(start1,limit);
    })
  </script>
</body>
</html>

You're shadowing your outer start1 with an inner one because you have an inner declaration (var start1 =start1+limit;). If you want to use start1 in that callback, use a different name for the local variable. If you want to use the outer start1, remove the var. — T.J. Crowder
– T.J. Crowder, Commented Aug 13, 2021 at 11:22

T.J. Crowder · Accepted Answer · 2021-08-13 11:29:10Z

You're shadowing your outer start1 with an inner one because you have an inner declaration (var start1 =start1+limit;), here's a simpler example:

var start1 = 0;

function example() {
    var start1 = start1 + 2;
    // Shows `NaN`, not `2`, because this inner `start1` initially
    // has the value `undefined`, and `undefined + 2` is `NaN`
    console.log(start1);
}

example();

If you want to use the outer start1 in that callback, use a different name for the local variable (or if you don't need a local, just don't have one. For example:

var start1 = 0;

function example() {
    var myStart = start1 + 2;
    // Shows `2`
    console.log(myStart);
}

example();

Note: I've used var in those examples because you did in your question, but I recommend not using var in new code; use let or const instead, they have several advantages over the old var, one of which might have helped you with this problem, because

var start1 = 0;

function example() {
    let start1 = start1 + 2; // <== Causes error
    console.log(start1);
}

example();

That causes an error because unlike var-declared variables, let-declared variables can't be read in their own initializer expresssion.

Collectives™ on Stack Overflow

Why variable declare outside function is not accessing inside function in jquery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related