SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript LocalStorage Setting Other Variables to NaN

    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.
    Code:
        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));
        
        }

  2. #2
    SitePoint Addict bronze trophy WolfShade's Avatar
    Join Date
    Mar 2014
    Location
    St. Louis, MO, USA
    Posts
    323
    Mentioned
    9 Post(s)
    Tagged
    0 Thread(s)
    Just curious, as I don't think we're seeing all your code.

    What is this?

    Code:
    $("#matineePrice").attr = parseFloat(storedValue1).toFixed(2);
    V/r,

    ^_^
    WolfShade The Spamhater

  3. #3
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't worry about that line of code I commented it out. Here's the whole javascript document if that helps.
    Code:
    // 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);
    			}

  4. #4
    SitePoint Addict bronze trophy WolfShade's Avatar
    Join Date
    Mar 2014
    Location
    St. Louis, MO, USA
    Posts
    323
    Mentioned
    9 Post(s)
    Tagged
    0 Thread(s)
    I'll glance at that to see if I can find any glaring errors. With what browser are you testing this code?
    V/r,

    ^_^
    WolfShade The Spamhater

  5. #5
    SitePoint Addict bronze trophy WolfShade's Avatar
    Join Date
    Mar 2014
    Location
    St. Louis, MO, USA
    Posts
    323
    Mentioned
    9 Post(s)
    Tagged
    0 Thread(s)
    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?
    Code:
    if(!!window.localStorage){
      //true code
      }
    else{
      //false code
      }
    V/r,

    ^_^
    WolfShade The Spamhater


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •