Question

我试图使用Ajax更新数量。但在此之前我尝试打印更新的值。但当我试图更新我得到的数量错误：

未捕获的ReferenceError：未定义updateCart

<td class="qty"><input class="form-control input-sm" id="quantity" onchange="updateCart()"  value="{{$row->quantity}}"></td>
<td class="price"><span>&#2547; {{$row->price*$row->quantity}}</span></td>
    <script>
$(document).ready(function(){
    function updateCart()
    {
       var x = document.getElementById("quantity").value;
        console.log(x);
    }
});
</script>

Answer 1

示例中的问题是函数updateCart()在全局范围内不存在。它仅存在于$(document).ready(function (){ });内，以便将updateCart()放在.ready之外。

<table>
  <tbody>
    <tr>
      <td class="qty">
        <input class="form-control input-sm" id="quantity" onchange="updateCart()">
      </td>

      <td class="price">
        <span>&#2547;</span>
      </td>
    </tr>
  </tbody>
</table>

<script>
  function updateCart() {
    var x = document.getElementById("quantity").value;
    console.log(x);
  }
</script>

然而，有更好的解决方案

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td class="qty">
        <input type="number" class="form-control input-sm js-quantity" />
      </td>

      <td class="price">
        <span>&#2547;</span>
        <span class="js-price"></span>
      </td>
    </tr>
  </tbody>
</table>


<script>
$(document).ready(function () {
  $('.js-quantity').on('change', function () {
    console.log($(this).val());
    
    var PRICE = 100;
    $('.js-price').html( +$(this).val() * PRICE )
  });
})
</script>

未捕获的ReferenceError：未定义updateCart（functionName）

1 个答案: