I have a program that calculates ticket quantities. If I set a new value to a variable using local storage it will cause the other variables to go NaN. But if I set the value of every variable in the form then nothing will be NaN and there are no issues, but the problem is I don’t want the user to have to set the values of every variable everytime they want to set the value of one variable. How can I rewrite this code so that the other variables won’t go to NaN if one variable is changed? Currently I only have it setup for beforenoonprice and matineeprice, but will add the rest once this issue is resolved. I also created jsbin so you can see it in action. It looks a little messy using the site, but it’s still functional. jsbin.com/hinogano/1/edit?html,css,js,output To Change prices click “Update Prices” and change one of the top two fields either before noon or matinee and click “Update Pricing” click cancel and then “run with js” to go back to main screen to test application.
var beforenoonprice = 6.75; // CHANGE THE PRICE OF THE BEFORE NOON TICKET
var matineeprice = 9.00; // CHANGE THE PRICE OF THE MATINEE TICKET
var seniorprice = 9.25; // CHANGE THE PRICE OF THE SENIOR TICKET
var militaryprice = 9.25; // CHANGE THE PRICE OF THE MILITARY TICKET
var studentdayprice = 8.00; // CHANGE THE PRICE OF THE STUDENT DAY TICKET
var seniordayprice = 6.75; // CHANGE THE PRICE OF THE SENIOR DAY TICKET
var adultprice = 10.75; // CHANGE THE PRICE OF THE ADULT TICKET
var childprice = 8.00; // CHANGE THE PRICE OF THE CHILD TICKET
var threeDprice = 3.50; // CHANGE THE PRICE OF THE REGULAR 3D PRICE
var imaxPrice = 4.50; // CHANGE THE PRICE OF THE IMAX TICKET
var imax3dPrice = 5.50; // CHANGE THE PRICE OF THE IMAX 3D TICKET
var output = document.getElementById('output');
function updatePricingFunction()
{
var beforeNoonFieldChange = document.getElementById('beforeNoonNPSlot').value;
var matineeFieldChange = document.getElementById('matineeNPSlot').value;
localStorage.setItem('text', beforeNoonFieldChange);
localStorage.setItem('text1', matineeFieldChange);
}
function load(){
var storedValue = localStorage.getItem('text');
var storedValue1 = localStorage.getItem('text1');
beforenoonprice = storedValue;
matineeprice = storedValue1;
beforeNoonCPSlot.innerHTML = "$" + parseFloat(storedValue).toFixed(2);
$("#beforeNoonPrice").attr = parseFloat(storedValue).toFixed(2);
$('#beforeNoonPrice').append("$" + (storedValue * 1).toFixed(2));
matineeCPSlot.innerHTML = "$" + parseFloat(storedValue1).toFixed(2);
$("#matineePrice").attr = parseFloat(storedValue1).toFixed(2);
$('#matineePrice').append("$" + (storedValue1 * 1).toFixed(2));
}
Just curious, as I don’t think we’re seeing all your code.
What is this?
$("#matineePrice").attr = parseFloat(storedValue1).toFixed(2);
Don’t worry about that line of code I commented it out. Here’s the whole javascript document if that helps.
// JavaScript Document
var beforenoonprice = 6.75; // CHANGE THE PRICE OF THE BEFORE NOON TICKET
var matineeprice = 9.00; // CHANGE THE PRICE OF THE MATINEE TICKET
var seniorprice = 9.25; // CHANGE THE PRICE OF THE SENIOR TICKET
var militaryprice = 9.25; // CHANGE THE PRICE OF THE MILITARY TICKET
var studentdayprice = 8.00; // CHANGE THE PRICE OF THE STUDENT DAY TICKET
var seniordayprice = 6.75; // CHANGE THE PRICE OF THE SENIOR DAY TICKET
var adultprice = 10.75; // CHANGE THE PRICE OF THE ADULT TICKET
var childprice = 8.00; // CHANGE THE PRICE OF THE CHILD TICKET
var threeDprice = 3.50; // CHANGE THE PRICE OF THE REGULAR 3D PRICE
var imaxPrice = 4.50; // CHANGE THE PRICE OF THE IMAX TICKET
var imax3dPrice = 5.50; // CHANGE THE PRICE OF THE IMAX 3D TICKET
var output = document.getElementById('output');
function updatePricingFunction()
{
var beforeNoonFieldChange = document.getElementById('beforeNoonNPSlot').value;
var matineeFieldChange = document.getElementById('matineeNPSlot').value;
localStorage.setItem('text', beforeNoonFieldChange);
localStorage.setItem('text1', matineeFieldChange);
}
function load(){
beforenoonprice = storedValue;
matineeprice = storedValue1;
var storedValue = 1 ; // default value;
if(localStorage['text'] !== undefined){ // does the local store exist.
if( ! isNaN(localStorage['text']) ){ // is it a number
storedValue = Number(localStorage['text']); // all good covert it from String to Number
}
}
var storedValue1 = 1 ; // default value;
if(localStorage['text1'] !== undefined){ // does the local store exist.
if( ! isNaN(localStorage['text1']) ){ // is it a number
storedValue1 = Number(localStorage['text1']); // all good covert it from String to Number
}
}
beforeNoonCPSlot.innerHTML = "$" + parseFloat(storedValue).toFixed(2);
//$("#beforeNoonPrice").attr = parseFloat(storedValue).toFixed(2);
$('#beforeNoonPrice').append("$" + (storedValue * 1).toFixed(2));
matineeCPSlot.innerHTML = "$" + parseFloat(storedValue1).toFixed(2);
// $("#matineePrice").attr = parseFloat(storedValue1).toFixed(2);
$('#matineePrice').append("$" + (storedValue1 * 1).toFixed(2));
}
$(document).ready(function () {
$("#changePricesLabel").hide();
$("#updatePricesButton").hide();
$("#confirmBox").hide();
$("#changePricesLabel").fadeIn(2000);
$("#updatePricesButton").fadeIn(2000);
$("#calculateButton").hide();
$("#calculateButton").fadeIn(2000);
$("#clearButton").hide();
$("#clearButton").fadeIn(2000);
$("#priceUpdateTable").hide();
$("#priceUpdateTableLabel").hide();
$("#priceUpdateScreen").hide();
$("#currentPriceScreen").hide();
$("#newPriceScreen").hide();
$("#beforeNoonUpdateLabel").hide();
$("#matineeUpdateLabel").hide();
$("#adultUpdateLabel").hide();
$("#childUpdateLabel").hide();
$("#seniorUpdateLabel").hide();
$("#militaryUpdateLabel").hide();
$("#seniorDayUpdateLabel").hide();
$("#studentDayUpdateLabel").hide();
$("#cancelButton").hide();
$("#UpdatePricingButton").hide();
$("#AmcLogo").hide();
$("#AmcLogo").fadeIn(2000);
$("#totalCalculated").hide();
$("#totalCalculated").fadeIn(2000);
$("#calculate").hide();
$("#calculate").fadeIn(2000);
$("#warning").hide();
$("#warning").fadeIn(2000);
$('#quantityLabel').hide();
$('#quantityLabel').fadeIn(2000);
$('#beforeNoonPrice').hide();
$('#beforeNoonPrice').fadeIn(2000);
$('#matineePrice').hide();
$('#matineePrice').fadeIn(2000);
$('#adultPrice').hide();
$('#adultPrice').fadeIn(2000);
$('#childPrice').hide();
$('#childPrice').fadeIn(2000);
$('#seniorPrice').hide();
$('#seniorPrice').fadeIn(2000);
$('#militaryPrice').hide();
$('#militaryPrice').fadeIn(2000);
$('#seniorDayPrice').hide();
$('#seniorDayPrice').fadeIn(2000);
$('#studentDayPrice').hide();
$('#studentDayPrice').fadeIn(2000);
$('#beforeNoon').hide();
$('#beforeNoon').fadeIn(2000);
$('#matinee').hide();
$('#matinee').fadeIn(2000);
$('#adultTicket').hide();
$('#adultTicket').fadeIn(2000);
$('#childTicket').hide();
$('#childTicket').fadeIn(2000);
$('#seniorTicket').hide();
$('#seniorTicket').fadeIn(2000);
$('#military').hide();
$('#military').fadeIn(2000);
$('#seniorDayTicket').hide();
$('#seniorDayTicket').fadeIn(2000);
$('#studentDayTicket').hide();
$('#studentDayTicket').fadeIn(2000);
$('#please2').hide();
$('#please2').fadeIn(2000);
$('#threed').hide();
$('#threed').fadeIn(2000);
$('#reg3d').hide();
$('#reg3d').fadeIn(2000);
$('#imax').hide();
$('#imax').fadeIn(2000);
$('#imaxLabel').hide();
$('#imaxLabel').fadeIn(2000);
$('#imax3d').hide();
$('#imax3d').fadeIn(2000);
$('#imax3dField').hide();
$('#imax3dField').fadeIn(2000);
});
function displayTotal(){
//PRICE CHANGE EDIT ENDS HERE
var beforenoon = Number(document.getElementById('beforeNoon').value) || 0;
var beforenooncost = beforenoon * beforenoonprice;
var matinee = Number(document.getElementById('matinee').value) || 0;
var matineecost = matinee * matineeprice;
var senior = Number(document.getElementById('seniorTicket').value) || 0;
var seniorcost = senior * seniorprice;
var Military = Number(document.getElementById('military').value) || 0;
var military = Military * militaryprice;
var StudentDay = Number(document.getElementById('studentDayTicket').value) || 0;
var studentdaycost = StudentDay * studentdayprice;
var seniorDay = Number(document.getElementById('seniorDayTicket').value) || 0;
var seniordaycost = seniorDay * seniordayprice;
var Adult = Number(document.getElementById('adultTicket').value) || 0;
var adultcost = Adult * adultprice;
var child = Number(document.getElementById('childTicket').value) || 0;
var childcost = child * childprice;
var threeD = Number(document.getElementById('threed').value) || 0;
var threeDcost = threeD * threeDprice;
var Imax = Number(document.getElementById('imax').value) || 0;
var imaxCost = Imax * imaxPrice;
var Imax3d = Number(document.getElementById('imax3d').value) || 0;
var imax3dCost = Imax3d * imax3dPrice;
var total = childcost+adultcost+military+seniorcost+studentdaycost+seniordaycost+threeDcost+imaxCost+imax3dCost+beforenooncost+matineecost;
document.getElementById('calculate').innerHTML = total.toFixed(2);
}
function clearAll(){
$('#beforeNoon').val("");
$('#matinee').val("");
$('#adultTicket').val("");
$('#childTicket').val("");
$('#beforeNoon').val("");
$('#seniorTicket').val("");
$('#seniorDayTicket').val("");
$('#studentDayTicket').val("");
$('#military').val("");
$('#threed').val("");
$('#imax').val("");
$('#imax3dField').val("");
$("#calculate").html("0.00");
}
function updatePricesFunction(){
$("#priceUpdateTableLabel").fadeIn(2000);
$("#priceUpdateTable").fadeIn(2000);
$('#quantityLabel').hide();
$('#beforeNoonPrice').hide();
$('#matineePrice').hide();
$('#adultPrice').hide();
$('#childPrice').hide();
$('#seniorPrice').hide();
$('#militaryPrice').hide();
$('#seniorDayPrice').hide();
$('#studentDayPrice').hide();
$('#beforeNoon').hide();
$('#matinee').hide();
$('#adultTicket').hide();
$('#childTicket').hide();
$('#seniorTicket').hide();
$('#military').hide();
$('#seniorDayTicket').hide();
$('#studentDayTicket').hide();
$('#please2').hide();
$('#threed').hide();
$('#reg3d').hide();
$('#imax').hide();
$('#imaxLabel').hide();
$('#imax3d').hide();
$("#UpdatePricingButton").fadeIn(2000);
$('#imax3dField').hide();;
$('#calculateButton').hide();
$('#clearButton').hide();
$('#AmcLogo').hide();
$('#totalCalculated').hide();
$("#warning").hide();
$("#updatePrices").hide();
$("#changePricesLabel").hide();
$("#priceUpdateScreen").fadeIn(2000);
$("#currentPriceScreen").fadeIn(2000);
$("#newPriceScreen").fadeIn(2000);
$("#beforeNoonUpdateLabel").fadeIn(2000);
$("#matineeUpdateLabel").fadeIn(2000);
$("#adultUpdateLabel").fadeIn(2000);
$("#childUpdateLabel").fadeIn(2000);
$("#seniorUpdateLabel").fadeIn(2000);
$("#militaryUpdateLabel").fadeIn(2000);
$("#seniorDayUpdateLabel").fadeIn(2000);
$("#studentDayUpdateLabel").fadeIn(2000);
$("#cancelButton").fadeIn(2000);
}
function cancelUpdate(){
$("#priceUpdateScreen").hide();
$("#currentPriceScreen").hide();
$("#newPriceScreen").hide();
$("#confirmBox").hide();
$("#beforeNoonUpdateLabel").hide();
$("#matineeUpdateLabel").hide();
$("#adultUpdateLabel").hide();
$("#childUpdateLabel").hide();
$("#seniorUpdateLabel").hide();
$("#militaryUpdateLabel").hide();
$("#seniorDayUpdateLabel").hide();
$("#studentDayUpdateLabel").hide();
$("#cancelButton").hide();
$("#priceUpdateTableLabel").hide();
$("#priceUpdateTable").hide();
$('#quantityLabel').hide();
$('#quantityLabel').fadeIn(2000);
$('#beforeNoonPrice').hide();
$('#beforeNoonPrice').fadeIn(2000);
$('#matineePrice').hide();
$('#matineePrice').fadeIn(2000);
$('#adultPrice').hide();
$('#adultPrice').fadeIn(2000);
$('#childPrice').hide();
$('#childPrice').fadeIn(2000);
$('#seniorPrice').hide();
$('#seniorPrice').fadeIn(2000);
$('#militaryPrice').hide();
$('#militaryPrice').fadeIn(2000);
$('#seniorDayPrice').hide();
$('#seniorDayPrice').fadeIn(2000);
$('#studentDayPrice').hide();
$('#studentDayPrice').fadeIn(2000);
$('#beforeNoon').hide();
$('#beforeNoon').fadeIn(2000);
$('#matinee').hide();
$('#matinee').fadeIn(2000);
$('#adultTicket').hide();
$('#adultTicket').fadeIn(2000);
$('#childTicket').hide();
$('#childTicket').fadeIn(2000);
$('#seniorTicket').hide();
$('#seniorTicket').fadeIn(2000);
$('#military').hide();
$('#military').fadeIn(2000);
$('#seniorDayTicket').hide();
$('#seniorDayTicket').fadeIn(2000);
$('#studentDayTicket').hide();
$('#studentDayTicket').fadeIn(2000);
$('#please2').hide();
$('#please2').fadeIn(2000);
$('#threed').hide();
$('#threed').fadeIn(2000);
$('#reg3d').hide();
$('#reg3d').fadeIn(2000);
$('#imax').hide();
$('#imax').fadeIn(2000);
$('#imaxLabel').hide();
$('#imaxLabel').fadeIn(2000);
$('#imax3d').hide();
$('#imax3d').fadeIn(2000);
$('#imax3dField').hide();
$('#imax3dField').fadeIn(2000);
$("#clearButton").fadeIn(2000);
$("#calculateButton").fadeIn(2000);
$("#totalCalculated").fadeIn(2000);
$("#calculate").fadeIn(2000);
$("#updatePrices").fadeIn(2000);
$("#UpdatePricingButton").hide();
$("#changePricesLabel").fadeIn(2000);
$("#warning").fadeIn(2000);
$("#AmcLogo").fadeIn(2000);
}
I’ll glance at that to see if I can find any glaring errors. With what browser are you testing this code?
Did some looking around.
Firstly, are you testing this on your local computer without benefit of web server? For example, if you are trying this by going to “file:///thisfile.html”, it won’t work, as localStorage requires a domain. But if you have IIS enabled, or are using Apache, and going to “http://localhost/thisfile.html” (or if you’re uploading to a hosted site) then localStorage should work just fine.
If you are testing in Internet Explorer, make sure that you are in {your IE version} standards mode, and not Compatibility (IE7) mode. Firefox after (I think) v4, ditto for Chrome, should be no issues.
Make sure you are using the correct doctype <!DOCTYPE html> and not something else.
Are you using any kind of check to make sure that localStorage is enabled and working?
if(!!window.localStorage){
//true code
}
else{
//false code
}