Can click() be used on in jQuery?

Question

I am new to Javascript/Jquery and is currently writing a online-shopping website as a practice. I want to write a function so that whenever I clicked the image 'buy_btn.jpg', the number of item in the shopping cart will increase by 1.

Here is my js code:

$('img[alt="buy"]').click(function(){
    var item_bought = $(".shopNum").val();
    item_bought++;
    $(".shopNum").html(item_bought);
})

Here is my html code for the button and the shopping cart number:

<div class = "topr_bot">
    <div class = "topr_bot_left">
        <img src = "image/buy_btn.jpg" alt="buy"> //this is the "add to 
        <p>Attention: This item will ONLY provide a normal receipt</p>
        </div>
    <div class = "topr_bot_right">
        <img src = "image/buy_btn.jpg" alt="buy2">
        </div>
    </div>
    <div class="shopCar fr">
        <span class="shopText fl">Shopping Cart</span>
        <span class="shopNum fl">0</span>
    </div>

The problem is, I tried to get the image by its alt tag and use alert and console.info() to debug it, but nothing popped up/appeared. Is it because that I used the wrong way to get the image by alt, or because I should not put click() onto a img?

Thank you.

Why don't you just add an id to that image and select it that way? — Charlie Fish, Jun 02 '17 at 10:24
If you have any control over the HTML, add a class or id to the image. Don't use the alt attribute to select the image. — JJJ, Jun 02 '17 at 10:25
seems code is correct, you are using `.html()` for text input with class `shopNum` I guess. — Prashant Shirke, Jun 02 '17 at 10:26
Thanks for suggestion on adding an id/class to the image. But I am curious about what problems it can cause if I use alt attribute to select the image? Thanks. — Rebecca Hao, Jun 02 '17 at 10:34
The main problem is that if you later change the alt attribute, the code breaks. The same happens if you add another image with the same alt attribute (just like you had to write "buy2" to the other image to prevent it being selected too). The alt attribute is not a similar data element as class or id, it has a specific use for showing information to the user when the image fails to load or for users who use a screen reader to access the page. It shouldn't be used to add keywords to elements. — JJJ, Jun 02 '17 at 10:40

score 0 · Answer 1 · edited Jun 02 '17 at 11:39

0

I think the value of your shopnum is being returned as a string, the best thing to try for now is to use the jquery parseInt() function when you're declaring item bought. That should hopefully solve your issue.

edited Jun 02 '17 at 11:39

Sreetam Das

3,226
2
22
36

answered Jun 02 '17 at 10:24

Barry Tickle

21
5

Thank you for mentioning the parseInt() to convert the string to number. ;) – Rebecca Hao Jun 02 '17 at 10:38

score 0 · Accepted Answer · answered Jun 02 '17 at 10:28

The main issue you have is that you're using val() to get the number from the span. You should be using text() instead. Also note that you should really convert the value to a number using parseInt() before doing any mathematical operation on it. While what you have will work, due to the implicit type coercion, it's not reliable. Try this:

$('img[alt="buy"]').click(function() {
  var item_bought = parseInt($(".shopNum").text()) || 0;
  $(".shopNum").html(++item_bought);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topr_bot">
  <div class="topr_bot_left">
    <img src="image/buy_btn.jpg" alt="buy"> //this is the "add to
    <p>Attention: This item will ONLY provide a normal receipt</p>
  </div>
  <div class="topr_bot_right">
    <img src="image/buy_btn.jpg" alt="buy2">
  </div>
</div>
<div class="shopCar fr">
  <span class="shopText fl">Shopping Cart</span>
  <span class="shopNum fl">0</span>
</div>

Thanks so much! I did not notice that val() cannot be used on ... — Rebecca Hao, Jun 02 '17 at 10:35

Can click() be used on in jQuery?

2 Answers2