使用Javascript修改表单值

Question

I am trying to add increment/decrement buttons to the quantity field. So when a user presses the right arrow the quantity in the qty field will update by 1. Here is my code, I am getting a Uncaught ReferenceError: incrementQty is not defined at HTMLAnchorElement.onclick and am not sure how to proceed. The function exists and I am passing the dynamic form id?

<script type=”text/javascript”>
     function decrementQty(id) {
     var val = parseInt($('#' + id).getValue());
     if(val != 1)
     document.getElementById(id).value = val - 1;
     }
     function incrementQty(id) {
     var val = parseInt($('#' + id).getValue());
     document.getElementById(id).value = val + 1;
     }
</script>


<input id="cart-<?php /* @escapeNotVerified */ echo $_item->getId() ?>-qty"
                           name="cart[<?php /* @escapeNotVerified */ echo $_item->getId() ?>][qty]"
                           data-cart-item-id="<?php /* @escapeNotVerified */ echo $_item->getSku() ?>"
                           value="<?php /* @escapeNotVerified */ echo $block->getQty() ?>"
                           type="number"
                           size="4"
                           title="<?php echo $block->escapeHtml(__('Qty')); ?>"
                           class="input-text qty"
                           maxlength="12"
                           data-validate="{required:true,'validate-greater-than-zero':true}"
                           data-role="cart-item-qty"/>
<a class="pic arrow-right qty" href="javascript:void(0);" onclick="incrementQty('cart-<?php /* @escapeNotVerified */ echo $_item->getId() ?>-qty');"></a>

Rendered HTML

<input id="cart-502-qty"
                           name="cart[502][qty]"
                           data-cart-item-id="7640149080453"
                           value="8"
                           type="number"
                           size="4"
                           title="Qty"
                           class="input-text qty"
                           maxlength="12"
                           data-validate="{required:true,'validate-greater-than-zero':true}"
                           data-role="cart-item-qty"/>
<a class="pic arrow-right qty" href="javascript:void(0);" onclick="incrementQty('cart-502-qty');"></a>

Answer 1

<input id="cart-<?php /* @escapeNotVerified */ echo $_item->getId() ?>-qty"
                           name="cart[<?php /* @escapeNotVerified */ echo $_item->getId() ?>][qty]"
                           data-cart-item-id="<?php /* @escapeNotVerified */ echo $_item->getSku() ?>"
                           value="<?php /* @escapeNotVerified */ echo $block->getQty() ?>"
                           type="number"
                           size="4"
                           title="<?php echo $block->escapeHtml(__('Qty')); ?>"
                           class="input-text qty"
                           maxlength="12"
                           data-validate="{required:true,'validate-greater-than-zero':true}"
                           data-role="cart-item-qty"/>
                <a class="pic arrow-right qty" href="javascript:void(0);" onclick="increaseQTY('cart-<?php /* @escapeNotVerified */ echo $_item->getId() ?>-qty');"></a>

<script>

function increaseQTY(formid) {
    document.getElementById(formid).value ++;
}

</script>