I'm having an issue with this piece of jquery code white trying to conduct a subtraction. What is it that I am missing/over-looking? When I add an item to the list then want to remove it, the Estimated Total on the top right does not reflect the deletion of the item. It then spits out an NaN error.
In the js section look for the code inside the comment with the *****.
I tried the variables 'currTotal' and 'deleted' with and without parseFloat and also with parseInt... still get the NaN error.
Thanks,
Sergio
P.S. Here is a jsfiddle demonstrating the code below
$(document).ready(function(){
$('.alert').hide();
// Check to see if input field is empty THEN if not empty add items, qty and price to list
$('#add').on('click', function() {
if ( !$('#list').val() ) {
$('.alert').show();
}
else {
// Adds typed items, qty and price to the list
// Adds Item and QTY to List
var item = $('#list').val();
var qty = $('#qty').val();
$('#list-a').append('<li><div class="done"></div><div class="delete"></div><input type="text" disabled="disabled" name="listItem[]" class="listItemInput" value="' + qty + " - " + item + '"</li>');
// Multiply QTY and Price. Ie: 2-bananas * $3 = $6.00
// Adds Product to List
var price = $('#price').val();
var itemTotal = qty * price;
$('#list-b').append('<li><span>$</span><input type="text" disabled="disabled" name="listPrice[]" class="listPriceInput" value="' + itemTotal + '"</li>');
// Resets input field to empty and focus
$('#list').val('').focus();
$('#qty, #price').val('');
$('.alert').hide();
}
});
// Fires Add to List button when enter is clicked
$('#list, #qty, #price').keyup(function(event){
if(event.keyCode === 13){
$('#add').click();
}
});
// Calculates and automatically updates Estimated Total
$('#add').click( function() {
var sumAdd = 0;
$('input.listPriceInput').each(function() {
sumAdd = sumAdd + parseFloat($(this).val());
});
$('#total-items').val('$' + sumAdd);
});
// Marks as done by adding class strike by clicking the check mark
$('#list-a').on('click', '.done', function () {
var listItem = $(this).closest('li'),
index = listItem.index();
listItem.parent().next('ul').find('li:eq(' + index + ')').add(listItem)
.toggleClass('strike');
});
//******//
// Deletes/fades out 'li' when X is clicked + Updates Estimated Total
//******//
$('#list-a').on('click', '.delete', function () {
var listItem = $(this).closest('li'),
index = listItem.index(),
currTotal = parseFloat($('#total-items').val()),
deleted = parseFloat(listItem.parent().next('ul').find('li:eq(' + index + ')').val()),
newTotal = currTotal - deleted;
$('#total-items').val('$' + newTotal);
listItem.parent().next('ul').find('li:eq(' + index + ')').add(listItem).slideUp(300, function () {
$(this).remove();
});
});
//******//
//******//
// Clear all items on the list and focus back on new shopping item
$('#clear').on('click', function() {
var li = $('li');
li.slideUp(500, function() {
$(li).remove('li');
});
$('#total-items').val('');
$('#list').val('').focus();
$('.alert').hide();
});
});@charset "UTF-8";
#content .est-total {
*zoom: 1;
}
#content .est-total:before, #content .est-total:after {
content: " ";
display: table;
}
#content .est-total:after {
clear: both;
}
* {
padding: 0;
margin: 0;
font-family: "Open Sans";
box-sizing: border-box;
}
html, body {
display: table;
height: 100%;
width: 100%;
}
a {
text-decoration: none;
color: white;
}
#header {
text-align: center;
width: 100%;
height: 330px;
padding: 0;
background: #222;
border-bottom: 10px solid #1480ff;
margin: -15px auto 0;
}
#header .logo {
margin-top: 15px;
}
#header .logo h1 {
font-size: 70px;
font-family: "Pacifico", cursive;
letter-spacing: 1px;
font-weight: 400;
color: #20e010;
display: inline-block;
}
#header .logo i {
font-size: 50px;
color: #20e010;
padding: 15px;
border: 5px solid #fff;
border-radius: 45px;
}
#content {
width: 100%;
max-width: 650px;
background-color: #fff;
margin: -120px auto 50px;
border: 10px solid #e2e2e2;
padding: 20px;
border-radius: 20px;
position: relative;
}
#content .ribbon {
width: 75px;
height: 75px;
font-size: 22px;
font-weight: 700;
color: #fff;
line-height: 25px;
text-transform: uppercase;
text-align: center;
background: #db0b0b;
padding: 10px 0 0 5px;
margin: -35px 0 0;
display: inline-block;
float: left;
border-radius: 10px;
}
#content .est-total {
text-align: right;
padding: 0;
margin-top: 0;
}
#content .est-total h2 {
font-size: 15px;
line-height: 30px;
font-style: italic;
font-weight: 400;
}
#content h1 {
margin: -10px 0 20px;
}
#content h5 {
font-size: 22px;
letter-spacing: -0.5px;
text-transform: uppercase;
color: #1480ff;
padding: 5px 3px 0;
}
#content #list-a {
width: 78%;
list-style: none;
margin: 0 10px 30px 0;
padding: 10px;
float: left;
}
#content #list-a li {
height: 43px;
padding: 10px 10px;
border-bottom: 1px solid #e2e2e2;
text-transform: capitalize;
}
#content #list-b {
width: 19%;
list-style: none;
margin: 0 0 30px 0;
padding: 10px;
float: left;
}
#content #list-b li {
padding: 10px 10px;
border-bottom: 1px solid #e2e2e2;
text-transform: capitalize;
}
#content input {
font-size: 15px;
width: 68%;
margin: 5px 0;
padding: 10px;
border-radius: 5px;
border: 1px solid rgba(0, 0, 0, 0.3);
}
#content input:focus {
outline: none;
}
#content input#qty {
width: 10%;
}
#content input#price {
width: 20%;
}
#content input#total-items {
font-size: 18px;
color: red;
font-weight: 700;
width: 17%;
display: inline-block;
float: right;
padding: 7px 9px;
margin: -6px 0 0 10px;
}
#content button {
width: 16%;
font-size: 13px;
border: none;
padding: 10px 8px;
margin: 10px 5px 0 0;
border-radius: 5px;
box-shadow: none;
cursor: pointer;
display: inline-block;
}
#content #add {
color: #444;
background: #20e010;
}
#content #add:focus {
outline: none;
}
#content #print {
color: #fff;
text-transform: uppercase;
background: #1480ff;
}
#content #print:focus {
outline: none;
}
#content #clear {
color: #fff;
text-transform: uppercase;
background: red;
float: right;
}
#content #clear:focus {
outline: none;
}
.delete:before {
font-family: "FontAwesome";
content: "";
font-size: 15px;
display: inline-block;
font-weight: 700;
color: #fff;
text-align: center;
background-color: red;
margin: -2px 15px 0 0;
border-radius: 5px;
padding: 3px 4px 5px 5px;
cursor: pointer;
float: left;
}
.done:before {
font-family: "FontAwesome";
content: "";
font-size: 15px;
display: inline-block;
font-weight: 700;
color: #fff;
text-align: center;
background-color: #20e010;
margin: -2px 5px 0 0;
border-radius: 5px;
padding: 3px 3px 5px 4px;
cursor: pointer;
float: left;
}
.strike {
text-decoration: line-through;
color: #1ccb0d;
background-color: #e8f9e6;
}
.strike input {
text-decoration: line-through;
color: #1ccb0d;
}
.alert {
font-size: 13px;
color: #aaa;
position: absolute;
bottom: 115px;
padding: 5px 8px;
}
.alert strong {
color: red;
}
.alert:before {
font-family: "FontAwesome";
content: "";
color: red;
font-size: 12px;
}
.footer {
width: 100%;
height: 100px;
background: #e2e2e2;
border-top: 10px solid #1480ff;
display: table-row;
}
.footer .disc {
height: 100px;
font-size: 14px;
padding: 35px 0;
text-align: center;
border-top: 10px solid #1480ff;
position: relative;
}
.footer a {
color: red;
font-weight: 700;
}
.footer a:hover {
color: #e30000;
text-decoration: underline;
}
.footer a:hover:before {
height: 42px;
padding: 5px 10px;
opacity: 1;
}
.footer a:before {
content: attr(data-sim);
width: 105px;
height: 0;
color: #fff;
font-weight: 300;
font-size: 13px;
background-color: #444;
padding: 0 10px;
border-radius: 5px;
position: absolute;
overflow: hidden;
bottom: 55px;
margin-left: -33px;
opacity: 0;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
input.listItemInput, input.listPriceInput {
border: 0 transparent none !important;
background-color: transparent !important;
padding: 0 !important;
margin: 0 !important;
}<!DOCTYPE html>
<html>
<head>
<title>My List brought to by: mylist.shop</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="fonts/css/font-awesome.min.css">
</head>
<body>
<div id="header">
<div class="logo">
<h1>SomeList</h1>
</div>
</div>
<div id="content">
<div class="ribbon">New List</div>
<div class="est-total">
<h2>Estimated Total:
<input id="total-items" type="text" name="total price" placeholder="$0" readonly>
</h2>
</div>
<ul id="list-a"></ul>
<ul id="list-b"></ul>
<div class="alert"> <strong>ALERT - </strong> Please enter a new List Item Below.</div>
<input id="list" type="text" name="list" placeholder="New List Item" autofocus required>
<input id="qty" type="number" name="quantity" placeholder="Qty.">
<input id="price" type="number" name="price" placeholder="Est. Price">
<button id="add" type="button" value="Print List">ADD</button>
<button id="print" type="button" onClick="window.print()" value="Print List">Print</button>
<button id="clear">Clear</button>
</div>
<div class="footer">
<div class="disc">© Copyright 2016 SomeList.</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/min/main-min.js"></script>
</body>
</html>This is happening because your Estimated Total has a dollar sign before the value. When you call parseFloat() on that, you get NaN.
Rather than subtracting from the total when something is removed, why not just recalculate the total? You already have the functionality for that:
$(document).ready(function() {
$('.alert').hide();
// Check to see if input field is empty THEN if not empty add items, qty and price to list
$('#add').on('click', function() {
if (!$('#list').val()) {
$('.alert').show();
} else {
// Adds typed items, qty and price to the list
// Adds Item and QTY to List
var item = $('#list').val();
var qty = $('#qty').val();
$('#list-a').append('<li><div class="done"></div><div class="delete"></div><input type="text" disabled="disabled" name="listItem[]" class="listItemInput" value="' + qty + " - " + item + '"</li>');
// Multiply QTY and Price. Ie: 2-bananas * $3 = $6.00
// Adds Product to List
var price = $('#price').val();
var itemTotal = qty * price;
$('#list-b').append('<li><span>$</span><input type="text" disabled="disabled" name="listPrice[]" class="listPriceInput" value="' + itemTotal + '"</li>');
// Resets input field to empty and focus
$('#list').val('').focus();
$('#qty, #price').val('');
$('.alert').hide();
calcTotal();
}
});
// Fires Add to List button when enter is clicked
$('#list, #qty, #price').keyup(function(event) {
if (event.keyCode === 13) {
$('#add').click();
}
});
// Calculates and automatically updates Estimated Total
function calcTotal() {
var sumAdd = 0;
$('input.listPriceInput').each(function() {
sumAdd = sumAdd + parseFloat($(this).val());
});
$('#total-items').val('$' + sumAdd);
}
// Marks as done by adding class strike by clicking the check mark
$('#list-a').on('click', '.done', function() {
var listItem = $(this).closest('li'),
index = listItem.index();
listItem.parent().next('ul').find('li:eq(' + index + ')').add(listItem)
.toggleClass('strike');
});
//******//
// Deletes/fades out 'li' when X is clicked + Updates Estimated Total
//******//
$('#list-a').on('click', '.delete', function() {
var listItem = $(this).closest('li'),
index = listItem.index();
listItem.parent().next('ul').find('li:eq(' + index + ')').add(listItem).slideUp(300, function() {
$(this).remove();
calcTotal();
});
});
//******//
//******//
// Clear all items on the list and focus back on new shopping item
$('#clear').on('click', function() {
var li = $('li');
li.slideUp(500, function() {
$(li).remove('li');
});
$('#total-items').val('');
$('#list').val('').focus();
$('.alert').hide();
});
});@charset "UTF-8";
#content .est-total {
*zoom: 1;
}
#content .est-total:before, #content .est-total:after {
content: " ";
display: table;
}
#content .est-total:after {
clear: both;
}
* {
padding: 0;
margin: 0;
font-family: "Open Sans";
box-sizing: border-box;
}
html, body {
display: table;
height: 100%;
width: 100%;
}
a {
text-decoration: none;
color: white;
}
#header {
text-align: center;
width: 100%;
height: 330px;
padding: 0;
background: #222;
border-bottom: 10px solid #1480ff;
margin: -15px auto 0;
}
#header .logo {
margin-top: 15px;
}
#header .logo h1 {
font-size: 70px;
font-family: "Pacifico", cursive;
letter-spacing: 1px;
font-weight: 400;
color: #20e010;
display: inline-block;
}
#header .logo i {
font-size: 50px;
color: #20e010;
padding: 15px;
border: 5px solid #fff;
border-radius: 45px;
}
#content {
width: 100%;
max-width: 650px;
background-color: #fff;
margin: -120px auto 50px;
border: 10px solid #e2e2e2;
padding: 20px;
border-radius: 20px;
position: relative;
}
#content .ribbon {
width: 75px;
height: 75px;
font-size: 22px;
font-weight: 700;
color: #fff;
line-height: 25px;
text-transform: uppercase;
text-align: center;
background: #db0b0b;
padding: 10px 0 0 5px;
margin: -35px 0 0;
display: inline-block;
float: left;
border-radius: 10px;
}
#content .est-total {
text-align: right;
padding: 0;
margin-top: 0;
}
#content .est-total h2 {
font-size: 15px;
line-height: 30px;
font-style: italic;
font-weight: 400;
}
#content h1 {
margin: -10px 0 20px;
}
#content h5 {
font-size: 22px;
letter-spacing: -0.5px;
text-transform: uppercase;
color: #1480ff;
padding: 5px 3px 0;
}
#content #list-a {
width: 78%;
list-style: none;
margin: 0 10px 30px 0;
padding: 10px;
float: left;
}
#content #list-a li {
height: 43px;
padding: 10px 10px;
border-bottom: 1px solid #e2e2e2;
text-transform: capitalize;
}
#content #list-b {
width: 19%;
list-style: none;
margin: 0 0 30px 0;
padding: 10px;
float: left;
}
#content #list-b li {
padding: 10px 10px;
border-bottom: 1px solid #e2e2e2;
text-transform: capitalize;
}
#content input {
font-size: 15px;
width: 68%;
margin: 5px 0;
padding: 10px;
border-radius: 5px;
border: 1px solid rgba(0, 0, 0, 0.3);
}
#content input:focus {
outline: none;
}
#content input#qty {
width: 10%;
}
#content input#price {
width: 20%;
}
#content input#total-items {
font-size: 18px;
color: red;
font-weight: 700;
width: 17%;
display: inline-block;
float: right;
padding: 7px 9px;
margin: -6px 0 0 10px;
}
#content button {
width: 16%;
font-size: 13px;
border: none;
padding: 10px 8px;
margin: 10px 5px 0 0;
border-radius: 5px;
box-shadow: none;
cursor: pointer;
display: inline-block;
}
#content #add {
color: #444;
background: #20e010;
}
#content #add:focus {
outline: none;
}
#content #print {
color: #fff;
text-transform: uppercase;
background: #1480ff;
}
#content #print:focus {
outline: none;
}
#content #clear {
color: #fff;
text-transform: uppercase;
background: red;
float: right;
}
#content #clear:focus {
outline: none;
}
.delete:before {
font-family: "FontAwesome";
content: "";
font-size: 15px;
display: inline-block;
font-weight: 700;
color: #fff;
text-align: center;
background-color: red;
margin: -2px 15px 0 0;
border-radius: 5px;
padding: 3px 4px 5px 5px;
cursor: pointer;
float: left;
}
.done:before {
font-family: "FontAwesome";
content: "";
font-size: 15px;
display: inline-block;
font-weight: 700;
color: #fff;
text-align: center;
background-color: #20e010;
margin: -2px 5px 0 0;
border-radius: 5px;
padding: 3px 3px 5px 4px;
cursor: pointer;
float: left;
}
.strike {
text-decoration: line-through;
color: #1ccb0d;
background-color: #e8f9e6;
}
.strike input {
text-decoration: line-through;
color: #1ccb0d;
}
.alert {
font-size: 13px;
color: #aaa;
position: absolute;
bottom: 115px;
padding: 5px 8px;
}
.alert strong {
color: red;
}
.alert:before {
font-family: "FontAwesome";
content: "";
color: red;
font-size: 12px;
}
.footer {
width: 100%;
height: 100px;
background: #e2e2e2;
border-top: 10px solid #1480ff;
display: table-row;
}
.footer .disc {
height: 100px;
font-size: 14px;
padding: 35px 0;
text-align: center;
border-top: 10px solid #1480ff;
position: relative;
}
.footer a {
color: red;
font-weight: 700;
}
.footer a:hover {
color: #e30000;
text-decoration: underline;
}
.footer a:hover:before {
height: 42px;
padding: 5px 10px;
opacity: 1;
}
.footer a:before {
content: attr(data-sim);
width: 105px;
height: 0;
color: #fff;
font-weight: 300;
font-size: 13px;
background-color: #444;
padding: 0 10px;
border-radius: 5px;
position: absolute;
overflow: hidden;
bottom: 55px;
margin-left: -33px;
opacity: 0;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
input.listItemInput, input.listPriceInput {
border: 0 transparent none !important;
background-color: transparent !important;
padding: 0 !important;
margin: 0 !important;
}<!DOCTYPE html>
<html>
<head>
<title>My List brought to by: mylist.shop</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="fonts/css/font-awesome.min.css">
</head>
<body>
<div id="header">
<div class="logo">
<h1>SomeList</h1>
</div>
</div>
<div id="content">
<div class="ribbon">New List</div>
<div class="est-total">
<h2>Estimated Total:
<input id="total-items" type="text" name="total price" placeholder="$0" readonly>
</h2>
</div>
<ul id="list-a"></ul>
<ul id="list-b"></ul>
<div class="alert"> <strong>ALERT - </strong> Please enter a new List Item Below.</div>
<input id="list" type="text" name="list" placeholder="New List Item" autofocus required>
<input id="qty" type="number" name="quantity" placeholder="Qty.">
<input id="price" type="number" name="price" placeholder="Est. Price">
<button id="add" type="button" value="Print List">ADD</button>
<button id="print" type="button" onClick="window.print()" value="Print List">Print</button>
<button id="clear">Clear</button>
</div>
<div class="footer">
<div class="disc">© Copyright 2016 SomeList.</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/min/main-min.js"></script>
</body>
</html>