CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Patrick
Patrick

Reputation: 2214

Subtract an input from the current number

I've set up a GitHub for my project plus a GitHub page. It takes a set value and subtracts the input once the button is pushed.

The script should take in the value set initially as a variable subtract. Another variable current is defined as the current number. A newVal is defined as current - subtract. change the current value to the newVal. Before changing the number use the jQuery bounce effect.

At the moment the effect affects all of the numbers instead of the one that is edited.

This is what I've come up with until I got stuck index.html

<!DOCTYPE html>
<html>
<head>
    <title>Macros Tracker</title>
    <link rel="stylesheet" href="css/reset.css" type="text/css">
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="scripts/jquery.jeditable.mini.js"></script>
    <script src="scripts/script.js"></script>
</head>
<body>
    <h1>Track your Macros</h1>
    <div class="wrapper">
        <div id="calories">
            <div class="number"><p>1945</p></div>
            <div class="label"><p>Calories</p></div>
            <input type="text" id="subtract"></input>
            <button>Subtract</button>
        </div>
        <div id="protein">
            <div class="number"><p>200</p></div>
            <div class="label"><p>Protein</p></div>
            <input type="text"></input>
            <button>Subtract</button>
        </div>
        <div id="carbs">
            <div class="number"><p>150</p></div>
            <div class="label"><p>Carbs</p></div>
            <input type="text"></input>
            <button>Subtract</button>
        </div>
        <div id="fats">
            <div class="number"><p>51</p></div>
            <div class="label"><p>Fats</p></div>
            <input type="text"></input>
            <button>Subtract</button>
        </div>
    </div>
</body>
</html>

script.js

$(document).ready(function(){
    $('button').click(function(){
        var subtract = parseInt($('#subtract').val(), 10);
        var current = parseInt($('.number p').val());
        var newVal = current - subtract; 
        $('.number p').effect('explode');
        $('.number p').html(newVal);
    });
});

Upvotes: 0

Views: 2336

Answers (2)

kevhann80
kevhann80

Reputation: 311

http://jsfiddle.net/zunc8/

You have to find just the one you want to change:

$(document).ready(function(){
    $('button').click(function(){
        var parent = $(this).parent();
        var subtract = parseInt(parent.find('#subtract').val(), 10);
        var current = parseInt(parent.find('.number p').text(),10);
        var newVal = current - subtract; 
        //$('.number p').effect('explode');
        parent.find('.number p').text(newVal);
    });
});

Upvotes: -1

Jason P
Jason P

Reputation: 27012

$('.number p').html(newVal); sets the html of all elements matching .number p to the specified html.

You need to use the context of the button and traverse the DOM to get the relevant elements:

$(document).ready(function(){
    $('button').click(function(){
        var $button = $(this);
        var subtract = parseInt($button.siblings('input').val(), 10);
        var $currentP = $button.siblings('.number').children('p');
        var current = parseInt($currentP.text(), 10);
        var newVal = current - subtract; 
        $currentP.effect('explode', function() {
            $currentP.text(newVal);
            $(this).show(); 
        });            
    });
});

Upvotes: 2

Related Questions