The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Having trouble with Save and Load Game Function, I have save game code but the load code isnt showing the amounts Of so
Rating  4
AngusmcFangus
post Jan 4 2017, 03:31 PM
Post #1


Unregistered









I have a save and load function with a button.

here are the functions for the save and load

function Save() {
localStorage.setItem("cash", cash);
localStorage.setItem("god", god);

}

function Load() {
cash = localStorage.getItem("cash", cash);
cash = parseInt(cash);
god = localStorage.getItem("god", god);
god = parseInt(god);
document.getElementById('text').value = god;
document.getElementById('text').value = cash;
}



The Load is the one I am having a problem with.

It works in the sense that it recognizes that it saved the item, but it doesn't update the amount it has
Ex
Buy God
God Cost 1000000
God's 0

yet even when it says that It knows there is something there. When I buy another god it does this

Buy God
God Cost 1440000
God's 2


Here is the God Function and button

Button

<a href="#"><button style="background-color: transparent;color: white"button onclick="buygod()">Buy Candy God</button><span style="font-size:12px;cursor:pointer"><br /><p3> There Can only be one god... Right?<p3>
<br />
Candy God's: <span id="god">0</span>
<br />
Candy God Cost: $ <span id="godCost">1000000</span>
<br /></a>

Function

var god = 0;

function buygod(){
var godCost = Math.floor(1000000 * Math.pow(1.2,god)); //works out the cost of this cursor
if(cash >= godCost){ //checks that the player can afford the cursor
god = god + 1; //increases number of cursors
cash = cash - godCost; //removes the cookies spent
document.getElementById('god').innerHTML = god; //updates the number of cursors for the user
document.getElementById('cash').innerHTML = cash; //updates the number of cookies for the user
};
var nextCost = Math.floor(1000000 * Math.pow(1.2,god)); //works out the cost of the next cursor
document.getElementById('godCost').innerHTML = nextCost; //updates the cursor cost for the user
};

window.setInterval(function(){

candyClick(god);

}, .000000000000001);


Before the save

Attached Image

after saving, rerunning the code, and loading

Attached Image

I ran out of space for another screen shot, but after buying one more upgrade it jumps up to two.



Any Suggestions and or answers would be very helpful!

This post has been edited by AngusmcFangus: Jan 4 2017, 03:44 PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jan 4 2017, 06:17 PM
Post #2


This is My Life
*******

Group: Members
Posts: 1,354
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



You're saving both 'cash' and 'god' values in the same element:
CODE
document.getElementById('text').value = god;
document.getElementById('text').value = cash;
You should have 2 elements, one with the id="cash" and the other with a id="god".
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
AngusmcFangus
post Jan 4 2017, 07:48 PM
Post #3


Unregistered









QUOTE(CharlesEF @ Jan 4 2017, 06:17 PM) *

You're saving both 'cash' and 'god' values in the same element:
CODE
document.getElementById('text').value = god;
document.getElementById('text').value = cash;
You should have 2 elements, one with the id="cash" and the other with a id="god".



I am still new to coding, so can you expand more on the 2 elements part. Do you mean when I put the "text" part in?
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 4 2017, 08:33 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,505
Joined: 9-August 06
Member No.: 6



Somewhere in the HTML you have an element with the id 'text', probably an INPUT. First you say "make the value of that input what's in the varable god'. Directly after you say "make the value of the same input what's in the variable cash'. Only the latter will show up.

You need two inputs with different IDs. Then you need to change the JavaScript so each line only targets one of them.

CODE
document.getElementById('text').value = god;
document.getElementById('something_else').value = cash;


You can use innerHTML instead of value. That way you don't need do have an input in the HTML. You can use any HTML element.

CODE
document.getElementById('myID').innerHTML = myVariable;


HTML
<div id="myID"></div>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
AngusmcFangus
post Jan 5 2017, 10:22 AM
Post #5





Group: Members
Posts: 9
Joined: 5-January 17
Member No.: 26,255



QUOTE(pandy @ Jan 4 2017, 09:33 PM) *

Somewhere in the HTML you have an element with the id 'text', probably an INPUT. First you say "make the value of that input what's in the varable god'. Directly after you say "make the value of the same input what's in the variable cash'. Only the latter will show up.

You need two inputs with different IDs. Then you need to change the JavaScript so each line only targets one of them.

CODE
document.getElementById('text').value = god;
document.getElementById('something_else').value = cash;


You can use innerHTML instead of value. That way you don't need do have an input in the HTML. You can use any HTML element.

CODE
document.getElementById('myID').innerHTML = myVariable;


HTML
<div id="myID"></div>


Thank you for helping me with that, but ut us still bugging out with the same thing I was having trouble with earlier. It doesn't update the amount after rerunning the code
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 5 2017, 10:41 AM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,505
Joined: 9-August 06
Member No.: 6



Show your stuff then. Both JS and HTML. Link to the page if possible.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
AngusmcFangus
post Jan 6 2017, 09:03 AM
Post #7





Group: Members
Posts: 9
Joined: 5-January 17
Member No.: 26,255



QUOTE(pandy @ Jan 5 2017, 11:41 AM) *

Show your stuff then. Both JS and HTML. Link to the page if possible.

https://docs.google.com/a/isd624.org/docume...dit?usp=sharing

post it into this link
http://www.w3schools.com/graphics/tryit.as...default_gravity

This post has been edited by AngusmcFangus: Jan 6 2017, 09:04 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 6 2017, 11:57 AM
Post #8


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,505
Joined: 9-August 06
Member No.: 6



You have so many errors in the HTML alone that that could be reason enough. It isn't. But you should fix them. Use https://validator.w3.org/ . To start with you can't invent your own elements, like P3 and H1.5...

The CSS is better, but there still are error. Fix those too. Use this for help finding them: https://jigsaw.w3.org/css-validator/ .

Point is, if you apply CSS or JS to messy HTML there is no way to know what happens.

But, I think your main problem is the below CSS rule. It makes everything disappear. Removing the lines I've commented out at least makes the block appear again.


CODE
.sidenav {
    height: 100%;
    /* width: 0; */
    position: fixed;
    z-index: 1;
    top: 0;
    left: 400px;
    background-color: #111;
   /*  overflow-x: hidden; */
    transition: 0.5s;
    padding-top: 60px;
}




QUOTE


Didn't understand that.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
AngusmcFangus
post Jan 6 2017, 02:38 PM
Post #9





Group: Members
Posts: 9
Joined: 5-January 17
Member No.: 26,255



QUOTE(pandy @ Jan 6 2017, 12:57 PM) *

You have so many errors in the HTML alone that that could be reason enough. It isn't. But you should fix them. Use https://validator.w3.org/ . To start with you can't invent your own elements, like P3 and H1.5...

The CSS is better, but there still are error. Fix those too. Use this for help finding them: https://jigsaw.w3.org/css-validator/ .

Point is, if you apply CSS or JS to messy HTML there is no way to know what happens.

But, I think your main problem is the below CSS rule. It makes everything disappear. Removing the lines I've commented out at least makes the block appear again.


CODE
.sidenav {
    height: 100%;
    /* width: 0; */
    position: fixed;
    z-index: 1;
    top: 0;
    left: 400px;
    background-color: #111;
   /*  overflow-x: hidden; */
    transition: 0.5s;
    padding-top: 60px;
}




QUOTE


Didn't understand that.


Thanks for the suggestion. The link was for the place im using the code in. It runs your code for you. When I removed the Overflow part it removed my side bar completely


This is what happened


Attached Image


Heres link again just in case http://www.w3schools.com/graphics/tryit.as...default_gravity

This post has been edited by AngusmcFangus: Jan 6 2017, 03:12 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 6 2017, 03:30 PM
Post #10


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,505
Joined: 9-August 06
Member No.: 6



QUOTE(AngusmcFangus @ Jan 6 2017, 08:38 PM) *

The link was for the place im using the code in. It runs your code for you.


CODE
When I removed the Overflow part it removed my side bar completely

It wasn't there at all to start with. Now you at least see parts of it. If you remove the rule altogether everything is there, but obviously not styled as you want it to be.


CODE

/* .sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 400px;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
} */


The positioning needs to be adopted to the rest of your layout. But I don't know where you want the sidebar to be and how you want it to look. As said, the HTML is so messy that I don't even know where to begin. Clean things up to start with.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
AngusmcFangus
post Jan 6 2017, 04:08 PM
Post #11





Group: Members
Posts: 9
Joined: 5-January 17
Member No.: 26,255



QUOTE(pandy @ Jan 6 2017, 04:30 PM) *

QUOTE(AngusmcFangus @ Jan 6 2017, 08:38 PM) *

The link was for the place im using the code in. It runs your code for you.


CODE
When I removed the Overflow part it removed my side bar completely

It wasn't there at all to start with. Now you at least see parts of it. If you remove the rule altogether everything is there, but obviously not styled as you want it to be.


CODE

/* .sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 400px;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
} */


The positioning needs to be adopted to the rest of your layout. But I don't know where you want the sidebar to be and how you want it to look. As said, the HTML is so messy that I don't even know where to begin. Clean things up to start with.




It is there when you hit the button called "Upgrades"
I don't really know how to clean it up because that is how I learned to do it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 7 2017, 12:48 AM
Post #12


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,505
Joined: 9-August 06
Member No.: 6



QUOTE(AngusmcFangus @ Jan 6 2017, 10:08 PM) *

It is there when you hit the button called "Upgrades"


I see. I guess I misunderstood the problem. Exactly what is it that doesn't show up now? What part of the JS?



QUOTE
I don't really know how to clean it up because that is how I learned to do it.


You'll have to unlearn then. wink.gif

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
AngusmcFangus
post Jan 7 2017, 07:35 PM
Post #13





Group: Members
Posts: 9
Joined: 5-January 17
Member No.: 26,255



QUOTE(pandy @ Jan 7 2017, 01:48 AM) *

QUOTE(AngusmcFangus @ Jan 6 2017, 10:08 PM) *

It is there when you hit the button called "Upgrades"


I see. I guess I misunderstood the problem. Exactly what is it that doesn't show up now? What part of the JS?



QUOTE
I don't really know how to clean it up because that is how I learned to do it.


You'll have to unlearn then. wink.gif


When you save the game after lets say 2 workers...
after you rerun the code (refresh) and hit load the 2 workers that the game knows you have don't show up
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 7 2017, 08:49 PM
Post #14


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,505
Joined: 9-August 06
Member No.: 6



I can't even start the game.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
AngusmcFangus
post Jan 8 2017, 05:15 PM
Post #15





Group: Members
Posts: 9
Joined: 5-January 17
Member No.: 26,255



QUOTE(pandy @ Jan 7 2017, 09:49 PM) *

I can't even start the game.

thats weird I have been on it for the past few hours
Are you sure your using the w3schools link I gave earlier?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
AngusmcFangus
post Jan 13 2017, 08:30 AM
Post #16





Group: Members
Posts: 9
Joined: 5-January 17
Member No.: 26,255



I guess this topic is getting old now, with no new items that may help, but Thanks for all the feedback that you did give me. I really appreciated it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 24th March 2017 - 05:16 AM