获取html用户生成的输入无效

Question

我有一个数量选择器，用户点击加号或减号来增加或减少数字。

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>

一切正常。我需要做两件事;为quantity_value设置最大值并获取用户值。我试过这个来获取用户价值

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

但我得到的是：

未定义

如何实现获取用户递增的值并设置数量选择器的最大值？

Answer 1

您已经拥有quantity_value

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

您可以在更新之前应用验证

value.text(x + 1);

像这样

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

Answer 2

它返回undefined，因为span元素没有您尝试访问的value属性。以下应该适用于现代浏览器......

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

这类似于this question

Answer 3

您已经在使用jQuery，因此利用它而不是使用document.getElementById("quantity_value")可以使用jQuery选择器。

同样@sinisake指出你必须访问文本内容，而不是值，因为span元素没有value属性：

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