Performing addition and multiplication operations on separate identifiers with the help of Jquery

Question

Performing addition and multiplication operations on separate identifiers with the help of Jquery

Currently, I am working on developing a shopping cart website and I am new to using Jquery. My layout involves the need to increment and decrement values by one when the plus and minus button is pressed. Additionally, the total price value should also be adjusted accordingly. Below is the Jquery code I have attempted:

//Add and Subtract
$("#add").on('click',function()
{
        if(parseInt($("#total input").val())>=0)
        $("#total input").val(parseInt($("#total input").val())+1);
});
$("#sub").on('click',function()
{
        if(parseInt($("input").val())>0)
        $("#total input").val(parseInt($("#total input").val())-1);
});

Here is my HTML code:

<div class="btn_group" id="total">
<a href="#" class="btn_add_subtract" id="add">
+
</a>
<input type="text" class="quantity_value" value="0"/>
<a href="#" class="btn_add_subtract" id="sub">
-
</a>
</div>

However, I am facing an issue where all the data in the list is being changed when I try to increment or decrement the value. Can anyone suggest a better approach for me to achieve this functionality?

Thank you

jquery html css

Answer 1

Answer №1

One way to approach this issue is by creating a basic framework for the problem, with the main focus being on how to locate the input element in relation to the button that was clicked.

To ensure that the same functionality can be applied to multiple buttons, it is advisable to assign the same class to these elements (add/minus buttons) for easy targeting.

$('.add').click(function() {
  $(this).prev().val(function(i, val) {
    return (+val || 0) + 1;
  });
});
$('.minus').click(function() {
  $(this).next().val(function(i, val) {
    val = (+val || 0) - 1;
    return val < 0 ? 0 : val;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <span class="minus">-</span><input name="x"/><span class="add">+</span>
</div>
<div>
  <span class="minus">-</span><input name="x"/><span class="add">+</span>
</div>
<div>
  <span class="minus">-</span><input name="x"/><span class="add">+</span>
</div>

Answer 2

One way to approach this issue is by creating a basic framework for the problem, with the main focus being on how to locate the input element in relation to the button that was clicked.

To ensure that the same functionality can be applied to multiple buttons, it is advisable to assign the same class to these elements (add/minus buttons) for easy targeting.

$('.add').click(function() {
  $(this).prev().val(function(i, val) {
    return (+val || 0) + 1;
  });
});
$('.minus').click(function() {
  $(this).next().val(function(i, val) {
    val = (+val || 0) - 1;
    return val < 0 ? 0 : val;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <span class="minus">-</span><input name="x"/><span class="add">+</span>
</div>
<div>
  <span class="minus">-</span><input name="x"/><span class="add">+</span>
</div>
<div>
  <span class="minus">-</span><input name="x"/><span class="add">+</span>
</div>

Answer 3

Answer №2

Avoid using ids and opt for classes instead.

Organize elements for each item within a container element:

<!-- Repeat this block for every item -->
<div class="itemContainer">
    <div class="total">$</div>
    <button type="button" class="sub">-</button>
    <input type="text" class="quantity" value="0"/>
    <button type="button" class="add">+</button>
</div>

To handle click events, use this to target the clicked button, then utilize .closest() to move up to the container and .find() to locate other elements within.

$(".add").on('click',function()
{
    var $itemContainer = $(this).closest('.itemContainer'),
        $quantity = $itemContainer.find('.quantity'),
        $total = $itemContainer.find('.total');

    // Perform operations on quantity input and total div for this specific item.
});

Answer 4

Avoid using ids and opt for classes instead.

Organize elements for each item within a container element:

<!-- Repeat this block for every item -->
<div class="itemContainer">
    <div class="total">$</div>
    <button type="button" class="sub">-</button>
    <input type="text" class="quantity" value="0"/>
    <button type="button" class="add">+</button>
</div>

To handle click events, use this to target the clicked button, then utilize .closest() to move up to the container and .find() to locate other elements within.

$(".add").on('click',function()
{
    var $itemContainer = $(this).closest('.itemContainer'),
        $quantity = $itemContainer.find('.quantity'),
        $total = $itemContainer.find('.total');

    // Perform operations on quantity input and total div for this specific item.
});

Answer 5

Answer №3

Recommendation: Use class in place of id -

$(".add").on('click',function()
{
        var input = $(this).closest(".total input");
        if(parseInt(input.val())>=0)
        input.val(parseInt(input.val())+1);
});
$(".sub").on('click',function()
{
        var input = $(this).closest(".total input");
        if(parseInt(input.val())>=0)
        input.val(parseInt(input.val())-1);
});

Hopefully this solution proves to be useful for you.

Answer 6

Recommendation: Use class in place of id -

$(".add").on('click',function()
{
        var input = $(this).closest(".total input");
        if(parseInt(input.val())>=0)
        input.val(parseInt(input.val())+1);
});
$(".sub").on('click',function()
{
        var input = $(this).closest(".total input");
        if(parseInt(input.val())>=0)
        input.val(parseInt(input.val())-1);
});

Hopefully this solution proves to be useful for you.

Answer 7

Answer №4

Suppose you have a set of buttons and a textbox enclosed in the same container;

$("#add").on('click',function()
{
        if(parseInt($("#total input").val())>=0)
        $(this).parent().find("#total input").val(parseInt($(this).parent().find("#total input").val())+1);
});
$("#sub").on('click',function()
{
        if(parseInt($("input").val())>0)
        $(this).parent().find("#total input").val(parseInt($(this).parent().find("#total input").val())-1);
});

I recommend using a common variable for repetitive selections.

Answer 8

Suppose you have a set of buttons and a textbox enclosed in the same container;

$("#add").on('click',function()
{
        if(parseInt($("#total input").val())>=0)
        $(this).parent().find("#total input").val(parseInt($(this).parent().find("#total input").val())+1);
});
$("#sub").on('click',function()
{
        if(parseInt($("input").val())>0)
        $(this).parent().find("#total input").val(parseInt($(this).parent().find("#total input").val())-1);
});

I recommend using a common variable for repetitive selections.

Performing addition and multiplication operations on separate identifiers with the help of Jquery

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Utilize Firebase for seamless signup/login process leveraging web3 integration

"Troubleshooting: Issues with jQuery Counter Functionality

What is the best way to include a permanent placeholder within an input field?

Tips for fading out two elements after completing a drag and drop action

Using jQuery to incorporate a variable into JSON schema markup

Scrollbar customization feature not functional in Firefox browser

Looking for a quicker loading time? Opt for a shortened version of CSS

Retrieve JSON information from an asmx file using a C# webpage

How to achieve a seamless iframe effect using CSS

Instructions for showing a "read more" and "read less" link when the text goes beyond a

The CSS filter failed to function properly as the Chrome Inspector is displaying a strik

pictures in photo display

Updating the forward slash and numerical values within javascript or jQuery

Utilizing jQuery AJAX in Internet Explorer 8

Wait for the scope value to become available before executing the directive or div

Utilizing the <a> element within a Thymeleaf loop

I kindly request your assistance in resolving the issues with the append() and empty

Angular disrupts the functionality of jQuery slideshow

Incorporate a dynamic fading effect for text and images using JQuery

Positioning two divs to the right of another div