Javascript [SOLVED]: getting html user generated input is not working

Javascript [SOLVED]: getting html user generated input is not working

Home Forums Scripting Javascript Tutorials Javascript [SOLVED]: getting html user generated input is not working

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #245698

    Cloudy Point
    Keymaster

    QuestionQuestion

    I have a quantity selector where user click on plus or minus to increase or decrease the number.

    function initQuantity() {
      if ($('.plus').length && $('.minus').length) {
        var plus = $('.plus');
        var minus = $('.minus');
        var value = $('#quantity_value');
    
        plus.on('click', function() {
          var x = parseInt(value.text());
          value.text(x + 1);
        });
    
        minus.on('click', function() {
          var x = parseInt(value.text());
          if (x > 1) {
            value.text(x - 1);
          }
        });
      }
    }
    
    initQuantity();
    <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <span>Quantity:</span>
    <div class="quantity_selector">
      <span class="minus"><i class="fa fa-minus" aria-hidden="true"></i></span>
      <span id="quantity_value">1</span>
      <span class="plus"><i class="fa fa-plus" aria-hidden="true"></i></span>
    </div>

    Everything works fine. I need to do two things; set a maximum for quantity_value and get the user value. I tried this for getting the user value

    var qty = document.getElementById("quantity_value").value;
    

    but what i get is:

    undefined

    How can I implement getting the user-incremented value and setting the maximum for the quantity selector?

    #245699

    Cloudy Point
    Keymaster

    Accepted AnswerAnswer

    You already have the quantity_value in

    var x = parseInt(value.text());
    

    You can apply your validation before the update

    value.text(x + 1);
    

    Like this

    if(x <= MAXIMUM_VALUE){
        value.text(x + 1);
    }
    

    Source: https://stackoverflow.com/questions/48026591/getting-html-user-generated-input-is-not-working
    Author: user3502000
    Creative Commons License
    This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.