I want to increase and decrease quantity label text on click on image (up down arrow .PNG) using JavaScript.

I'm creating a E-Com website and looking to change quantity on click of
(like up down arrow PNG) image using JavaScript.
as you can see in following image i have put link but i need image
instead
of that and on click of that image i want to change text of that
Quantity label like plus and minus the quantity.
I'm less friendly with JavaScript so kindly suggest me some way to do it
using JavaScript, any help would be appreciated..
Thanks .

[![Kindly have a look][1]][1]

[1]:

<div class="col-md-3 col-lg-3 col-sm-12 col-xs-12">
<h3 id="h3" runat="server" style="font-size: 26px; color:
#F67777;">
</h3>
<asp:Label ID="lblSalePrice" runat="server" Style="font-size:
18px"></asp:Label><br />
<asp:Label ID="lblMrp" runat="server" Style="font-size: 18px;
text-decoration: line-through;"></asp:Label>
<asp:Label ID="lblDiscount" runat="server" Style="font-size:
18px; color:green; margin-left:5px"></asp:Label><br />
<asp:Label ID="Quantity" runat="server" Text="Quantity : "
Style="font-size: 18px; color:green;" ></asp:Label>


//Want to use image //
<asp:Label:ID="lblQuantity" runat="server" Style="font-size: 18px;
color:green; margin-left:5px"></asp:Label><br />
**<a id="prev">Decrease Quantity</a><br />
<a id="next">Increase Quantity</a><br />**


<label class="hvr-skew-backward">
<asp:Button ID="btnSubmit" class=" hvr-skew-backward"
runat="server"
Text="Place Order" Style="color: white; border:none; "
onclick="btnSubmit_Click" />
</label>
<label class="hvr-skew-backward">
<asp:Button ID="BtnCart" class=" hvr-skew-backward"
runat="server"
Text="Add to Cart" Style="color: white; border:none; " />
</label>
</div>

If you're willing to use jQuery please see this Fiddle

[To see links please register here]

You can use images instead of anchors.
Consider using vector based icons e.g.

[To see links please register here]

HTML

<a href="#" class="set-quantity increase">Increase</a>
<a href="#" class="set-quantity decrease">Decrease</a>

<input type="text" name="quantity" id="quantity">

Javascript

$(document).on('click', '.set-quantity', function(){
var current_value = $('#quantity').val() > 0 ? $('#quantity').val() : 0

if($(this).hasClass('increase')){
var new_value = ++current_value
}

if($(this).hasClass('decrease')){
var new_value = current_value == 0 ? 0 : --current_value
}

console.log(new_value)
$('#quantity').val(new_value)
return false;
})

use anchor tag and image (arrow icon) inside anchor tag, so it will work like clickable image. And call your javascript function in href attribute of anchor tag

Example -

<script language="javascript">
function changeQty(qty){
var currentQty = document.getElementById('lblSalePrice').value;
currentQty = currentQty + qty;
document.getElementById('lblSalePrice').value = currentQty;
}
</script>

<a style="color:#000;text-decoration: none" href="javascript:changeQty(1)">
<img src="images/add.png" border="0" title="UpArrow" />
</a>

<a style="color:#000;text-decoration: none" href="javascript:changeQty(-1)">
<img src="images/add.png" border="0" title="DownArrow" />
</a>