1

Hello i want to display the button only when the value does not exceed 25. My code looks like this. Value in my product list element is 25. And with each click I add 6 to my input[name='skip] element. What i'm doing wrong? Note that my input[name='skip] is increasing with each click.

$(function () {
    $("#button-submit").click(function () {
        var $productList = $(".product-list");
        var $value = $("input[name='skip']");
        $value.val(parseInt($value.val()) + 6);
        if (parseInt($productList.val()) >= parseInt($value.val())) {
            $("#button-submit").hide();
        }
    });
});
4
  • 2
    Welcome! The HTML would be useful - what would be most useful is if you created a runnable snippet. Please see how to create an minimal reproducible example Nov 20, 2018 at 14:57
  • You should do opposite: if (parseInt($productList.val()) < parseInt($value.val())) { (I'm guessing here).
    – Poul Bak
    Nov 20, 2018 at 15:03
  • What is .product-list? Does it have a value? Are you sure? The code works fine, assuming that .product-list has a value that is greater than the incremented $value.val().... Nov 20, 2018 at 15:13
  • I think you should use < instead
    – Mohammad
    Nov 20, 2018 at 15:14

3 Answers 3

1

Your condition is incorrect. So you should use < instead of >=

$("#button-submit").click(function () {
  var $productList = $(".product-list");
  var $value = $("input[name='skip']");
  $value.val(parseInt($value.val()) + 6);
  if (parseInt($productList.val()) < parseInt($value.val())) {
    $("#button-submit").hide();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="product-list" value="25">
<input type="text" name="skip" value="0">
<button type="button" id="button-submit">Click</button>

Also your code could be simpler

$("#button-submit").click(function () {
  var $value = $("input[name='skip']");
  $value.val(+$value.val() + 6);
  if (+$(".product-list").val() < +$value.val()) {
    $(this).hide();
  }
});
1
  • It acutally helped, thanks a lot however i needed add id a custom attirbute as what i learned "DIVs do not have a value property". That is way the button didn't disappear. As the value was null for the Product List. Nov 21, 2018 at 10:32
1

you seem to have an error with the selector

var $productList = $(".product-list']");

should probably be something like

var $productList = $(".product-list");

Edit: i think you might want to use

$(".product-list").length instead of $(".product-list").val() since it looks like its a collection of items.

Just a guess tho as you havent provided the full markup.

2
  • While a good hunch, this is just a guess, given that OP hasn't included the target markup... Nov 20, 2018 at 14:58
  • Sorry it was wrongly copied code. There is value attirbute in my div, which has the amount of all products. Having a collection propably won't work as those products are loaded dynamically with each click. So i wanted to compare Value from that div to skip parameter which increases with each click by 6. And when the skip exceed the amount of products, stop displaying the button. Nov 20, 2018 at 15:07
1

Are you looking to get the count of list items? I have a sample for counting list items below. Also, I noticed the comparison of productlist to value was backwords so I reversed the operator less than as opposed to greater than.

$(function() {
  $("#button-submit").click(function() {
   
    // get number of list items
    var $productList = $('.product-list').children('li').length;
    var $value = $("input[name='skip']");
    //alert("value: "+$value.val());
    //alert("value: "+$value.val()+" productlist: " + $productList);
    $value.val(parseInt($value.val()) + 6);

    if ($productList <= parseInt($value.val())) {
      $("#button-submit").hide();
    }

  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="skip" value=0>
<button id="button-submit">Click</button>
<div class="product-list"></div>

<ul class="product-list">
  <li>Apple</li>
  <li>Banana</li>
  <li>Carrot</li>
  <li>Pear</li>
  <li>Cherry</li>
  <li>Watermelon</li>
  <li>Lemon</li>
  <li>Kiwi</li>
  <li>Grape</li>
</ul>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.