getting html user generated input is not working

Question

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?

http://jsfiddle.net/DanielGale/joq9gm5q/2/ You shouldn't need parseInt if you are controlling the number in the span. — Daniel Gale, Dec 29 '17 at 18:34

score 3 · Accepted Answer · answered Dec 29 '17 at 18:19

3

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

answered Dec 29 '17 at 18:19

zdarkwhite

346
4
4

Agreed, nice catch. No need to fetch it from the HTML again. In fact, I might define the variable as "1" and insert it into the HTML in the first place. – showdev Dec 29 '17 at 18:29

score 1 · Answer 2 · answered Dec 29 '17 at 18:12

1

It is returning undefined because span elements don't have the value property you are trying to access. The following should work in modern browsers...

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

This is similar to this question

answered Dec 29 '17 at 18:12

mep2664

104
5

2

or, as they're using jQuery elsewhere, `$("#quantity_value").text();` – Snowmonkey Dec 29 '17 at 18:13

score 1 · Answer 3 · answered Dec 29 '17 at 18:14

You are already using jQuery so take advantage of it instead of using document.getElementById("quantity_value") you can use a jQuery selector.

Also as @sinisake pointed out you must access the text content, not the value as span elements don't have a value attribute:

var qty = $('#quantity_value').text();

getting html user generated input is not working

3 Answers3