CODEWITHSUNDEEP
javascriptjquery
Hubert Łachecki
Hubert Łachecki

Reputation: 13

How to hide the button when the value exceeds specific amount

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();
        }
    });
});

Upvotes: 1

Views: 263

Answers (3)

jeffld
jeffld

Reputation: 726

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>

Upvotes: 1

Mohammad
Mohammad

Reputation: 21489

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();
  }
});

Upvotes: 1

manWe
manWe

Reputation: 350

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.

Upvotes: 1

Related Questions