11 Replies - 796 Views - Last Post: 08 August 2014 - 01:14 AM

#1 andynov123  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 33
  • Joined: 24-May 11

Javascript LocalStorage Setting Other Variables to Null

Posted 05 August 2014 - 04:32 PM

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 null. But if I set the value of every variable in the form then nothing will be null 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 null 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 created a 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.

This post has been edited by andynov123: 05 August 2014 - 04:33 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Javascript LocalStorage Setting Other Variables to Null

#2 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 123
  • View blog
  • Posts: 551
  • Joined: 15-March 14

Re: Javascript LocalStorage Setting Other Variables to Null

Posted 05 August 2014 - 04:36 PM

You will have to show us the code. There should be no reason setting one localStorage name:value pair will change the others to null. The only way they can be set to null is by code. Javascript if it deletes anything will set it to undefined, not null.
Was This Post Helpful? 0
  • +
  • -

#3 andynov123  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 33
  • Joined: 24-May 11

Re: Javascript LocalStorage Setting Other Variables to Null

Posted 05 August 2014 - 04:38 PM

When I say null I mean it says NaN. I think you were helping me with this issue a while ago and I had other things on my plate at the time and didn't pick it up until now. The code in action can be found here: jsbin.com/hinogano/1/edit?html,css,js,output It looks a little messy using the site, but it's still functional. To test it and 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.

Here's all the code as well.
HTML
    <!doctype html>
    <html>
    <head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
    <link rel="stylesheet" type="text/css" href="amc.css">
     <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <script src="js/jquery.confirm.js"></script>
    <meta charset="utf-8">
    <title>Ticket Calculator</title>
    </head>
    
    <body onload="load()">
    
    <div id="logo1"><img src="logo1.png" width="822" height="59"  alt=""/></div>
    <div id="outline">
    
    <div id="priceUpdateTableLabel">
    Update Ticket Prices
    </div>
    
      
       
    
    <div id="priceUpdateTable">
               <table>
    
      
    
    <tr>
    
    <td>Price Type</td>
      <td>Current Price</td>
      <td>New Price</td>		
      <td>Hide Price Type</td>		
    </tr>
    <tr>
    <td>Before Noon</td>
    
      <td><div id="beforeNoonCPSlot"></div></td>
       <td><input class="input-small" type="text" name="sampletext" id="beforeNoonNPSlot"></td>
     
      <td><button type="button" id="hideBeforeNoon" class="btn btn-primary btn-lg" onclick="hideBeforeNoon()">Hide</button></td>	
        
    </tr>
    <tr>
    <td>Matinee</td>
      <td><div id="matineeCPSlot"></div></td>
      <td><input class="input-small" id="matineeNPSlot" type="text"></td>	
       <td><button type="button" id="hideMatinee" class="btn btn-primary btn-lg" onclick="hideMatinee()">Hide</button></td>		
    </tr>
    <tr>
    <td>Adult</td>
      <td><div id="adultCPSlot"></div></td>
      <td><input class="input-small" id="adultNPSlot" type="text"></td>	
       <td><button type="button" id="hideAdult" class="btn btn-primary btn-lg" onclick="hideAdult()">Hide</button></td>		
    </tr>
    <tr>
    <td> Child</td>
      <td><div id="childCPSlot"></div></td>
      <td><input class="input-small" id="childNPSlot" type="text"></td>	
       <td><button type="button" id="hideChild" class="btn btn-primary btn-lg" onclick="hideChild()">Hide</button></td>		
    </tr>
    <tr>
    <td>Senior</td>
      <td><div id="seniorCPSlot"></div></td>
      <td><input class="input-small" id="seniorNPSlot" type="text"></td>	
       <td><button type="button" id="hideSenior" class="btn btn-primary btn-lg" onclick="hideSenior()">Hide</button></td>		
    </tr>
    <tr>
    <td>Military</td>
      <td><div id="militaryCPSlot"></div></td>
      <td><input class="input-small" id="militaryNPSlot" type="text"></td>	
       <td><button type="button" id="hideMilitary" class="btn btn-primary btn-lg" onclick="hideMilitary()">Hide</button></td>		
    </tr>
    <tr>
    <td>Senior Day</td>
      <td><div id="seniorDayCPSlot"></div></td>
      <td><input class="input-small" id="seniorDayNPSlot" type="text"></td>	
       <td><button type="button" id="hideSeniorDay" class="btn btn-primary btn-lg" onclick="hideSeniorDay()">Hide</button></td>		
    </tr>
    <tr>
    <td>Student Day</td>
      <td><div id="studentDayCPSlot"></div></td>
      <td><input class="input-small" id="studentDayNPSlot" type="text"></td>		
       <td><button type="button" id="hideStudentDay" class="btn btn-primary btn-lg" onclick="hideStudentDay()">Hide</button></td>	
    </tr>
    </table>
    
    </div>
    <div id="quantityLabel">Please enter the quantity of each ticket</div>
    
    <div id="ticketFields">
    <div class="controls controls-row">
    
     <input type="text" id="beforeNoon" class="input-small" placeholder="Before Noon"><br>
     <input type="text" id="matinee" class="input-small" placeholder="Matinee"><br>
        <input type="text" id="adultTicket" class="input-small" placeholder="Adult"><br>
           <input type="text" id="childTicket" class="input-small" placeholder="Child"><br>
                  <input type="text" id="seniorTicket" class="input-small" placeholder="Senior"><br>
           <input type="text" id="military" class="input-small" placeholder="Military"><br>
     <input type="text" id="seniorDayTicket" class="input-small" placeholder="Senior Day"><br>
      <input type="text" id="studentDayTicket" class="input-small" placeholder="Student Day">
      
      <div id="pricingStructure">
    <div id="beforeNoonPrice"></div>
    <div id="matineePrice"></div>
    <div id="adultPrice"></div>
    <div id="childPrice"></div>
    <div id="seniorPrice"></div>
    <div id="militaryPrice"></div>
    <div id="seniorDayPrice"></div>
    <div id="studentDayPrice"></div>
    </div><br>
    <div id="warning">Please make sure all the information on the left is accurate before updating any accounts.</div>
    <div id="changePricesLabel">If the prices are wrong, click here to update</div><div id="updatePricesButton"> <button type="button" id="updatePrices"  onclick="updatePricesFunction()"  class="btn btn-primary btn-lg">Update Prices</button></div>
    <br>
    <div id="additionalInfo">
    <div id="please2">Please enter additional information if needed</div>
    
     <input class="input-small" id="threed" type="text"><div id="reg3d">How many tickets are regular<b> 3D?</b>&nbsp;&nbsp;($3.50 additional charge per ticket)</div>
      <input class="input-small" id="imax" type="text" ><div id="imaxLabel">How many tickets are <b>IMAX(NO 3D)?</b>&nbsp;&nbsp;($4.50 additional charge per
    ticket)</div>
      <input class="input-small" id="imax3dField" type="text" ><div id="imax3d">How many tickets are <b>IMAX 3D?</b>&nbsp;&nbsp;($5.50 additional charge per ticket)</div><br>
    
     <button type="button" id="calculateButton"  onclick="displayTotal()"  class="btn btn-success btn-lg">Calculate</button>
      <button type="button" id="clearButton" class="btn btn-danger btn-lg" onclick="clearAll()">Clear</button>
      <div id="priceAndUpdate">
     <button type="button" id="cancelButton" class="btn btn-danger btn-lg" onclick="window.location.reload()">Cancel</button>
     <button type="button" id="UpdatePricingButton" class="btn btn-success btn-lg" onclick="updatePricingFunction()">Update Pricing</button>
     </div>
     <div id="AmcLogo"><img src="amcLogo.png" width="100" height="100"  alt=""/></div><div id="totalCalculated">Ticket Total: $ <div id="calculate">0.00</div></div>
    <div id="confirmBox">Confirm Price Change
    <div id="cancelPriceChange"> <button type="button" id="cancelPriceUpdateButton" class="btn btn-danger btn-lg" onclick="cancelPriceUpdate()">Cancel Change</button></div>
    <div id="confirmPriceChange"> <button type="button" id="confirmPriceUpdateButton" class="btn btn-success btn-lg" onclick="confirmPriceUpdate()">Confirm Change</button>
    
    </div>
    </div>
    </div>
     
    </div>
    
    </div>
    </div>
    
    <script type="text/javascript" src="js/jQuery.min.js"></script>
      <link href="css/bootstrap.min.css" rel="stylesheet">
          <script type="text/javascript" src="js/amc.js"></script>
    
     <!-- bootbox code -->
        <script src="bootbox.min.js"></script>
      
    
    
    
    </body>
    </html>



Javascript function load() and function updatePricingFunction() are what you want to look at.

// 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(){
	 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));

}









 	$(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);
			}
	



This post has been edited by andynov123: 05 August 2014 - 04:46 PM

Was This Post Helpful? 0
  • +
  • -

#4 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 400
  • View blog
  • Posts: 1,461
  • Joined: 15-January 14

Re: Javascript LocalStorage Setting Other Variables to Null

Posted 05 August 2014 - 04:47 PM

Null and NaN are two different things. When you use parseFloat or parseInt, if the value could not be converted to a number then it takes the value NaN (not a number). Instead of storing text values in localStorage, and then using parseFloat every time you retrieve the value, use parseFloat once, verify that it is not NaN, and then store the float value. You can use isNaN to check for NaN after using parseFloat and show an error message if the value is NaN.

Also, that's some pretty creative indenting you have going on in that code.
Was This Post Helpful? 0
  • +
  • -

#5 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 123
  • View blog
  • Posts: 551
  • Joined: 15-March 14

Re: Javascript LocalStorage Setting Other Variables to Null

Posted 05 August 2014 - 04:58 PM

NaN means (Not a Number). That means somewhere you are doing something to the variable that results in it not being a number.


Just having a quick look at your code I see that on in function load() you get two value from localStorage and forget to vet or convert them to Numbers. localStorage should always be checked.

var storedValue = ???? ; // 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
   }
}   



That may fix your code as I stop reading at that point there could be other problems. Go through and find anywhere that you might get a value that is not a number and add the appropriate code to prevent that from happening.
Was This Post Helpful? 0
  • +
  • -

#6 andynov123  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 33
  • Joined: 24-May 11

Re: Javascript LocalStorage Setting Other Variables to Null

Posted 05 August 2014 - 05:10 PM

I made the necessary modifications to my code in regards to what you suggested Blindman67 and it stopped saying NaN if I don't assign a value to one of the variables. Instead it sets the other variable to $0.00 if I set a new value to the other variable. So if I set the matinee price to $3.00 then the Before Noon price becomes $0.00. What would you suggest?


 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));

}

Attached image(s)

  • Attached Image

This post has been edited by andynov123: 05 August 2014 - 05:12 PM

Was This Post Helpful? 0
  • +
  • -

#7 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 123
  • View blog
  • Posts: 551
  • Joined: 15-March 14

Re: Javascript LocalStorage Setting Other Variables to Null

Posted 05 August 2014 - 05:33 PM

you have on line 146 (post #3 code block 2)
var matinee = Number(document.getElementById('matinee').value) || 0;

Check you are not getting an incorrect value from the input element (does it have a $ sign that needs to be removed"). The input should really be type="number" but that is problematic as well as IE9 and below does not support number.
Was This Post Helpful? 0
  • +
  • -

#8 andynov123  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 33
  • Joined: 24-May 11

Re: Javascript LocalStorage Setting Other Variables to Null

Posted 05 August 2014 - 05:37 PM

If it is problematic with IE9 and below, what would you recommend I do as an alternative? Also here's the whole javascript document updated. Also I noticed that while the output nuumber changed is correct, When I click the calculate button I see $NaN

// 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);
			}
	


Attached image(s)

  • Attached Image

This post has been edited by andynov123: 05 August 2014 - 05:43 PM

Was This Post Helpful? 0
  • +
  • -

#9 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 123
  • View blog
  • Posts: 551
  • Joined: 15-March 14

Re: Javascript LocalStorage Setting Other Variables to Null

Posted 05 August 2014 - 05:59 PM

Ill have to get back to you later on this as its 9am here, time to work...
Was This Post Helpful? 0
  • +
  • -

#10 andynov123  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 33
  • Joined: 24-May 11

Re: Javascript LocalStorage Setting Other Variables to Null

Posted 05 August 2014 - 06:00 PM

Ok no problem. Thanks for all your help. Talk to you later.
Was This Post Helpful? 0
  • +
  • -

#11 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3517
  • View blog
  • Posts: 12,008
  • Joined: 12-December 12

Re: Javascript LocalStorage Setting Other Variables to Null

Posted 05 August 2014 - 07:00 PM

Just to note that you could reduce your code substantially in places if you made use of (common) class-names, rather than addressing every element by its id each time.
Was This Post Helpful? 0
  • +
  • -

#12 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 123
  • View blog
  • Posts: 551
  • Joined: 15-March 14

Re: Javascript LocalStorage Setting Other Variables to Null

Posted 08 August 2014 - 01:14 AM

There is not much to recommend to solve the IE9 issue, apart from vetting all input from input fields to make sure that they are supplying correctly formatted and ranged numbers.

You must check if a number is valid every time you get it from local storage of from a input.

Lines 28 and 29

Why are you assigning storedValue and storedValue1 to beforenoonprice and matineeprice. They are undefined and thus will mash your calculations when you use (beforenoonprice or matineeprice) later.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1