javascript - Uncaught ReferenceError : updateCart (functionName) is not defined

Question

我尝试使用 Ajax 更新数量。但在此之前我尝试打印更新后的值。但是当我尝试更新数量时出现以下错误:

Uncaught ReferenceError: updateCart is not defined

<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>