Save button

Asked

Viewed 47 times

-2

Hello, I need someone to tell me how to make a system to save my points in java script, I will provide my html css and javascript, here are mine codigos:

let add = document.getElementById('increment');

let int = document.getElementById('number');
let integer = 0;

add.addEventListener('click', function(){
    integer += 1;
    int.innerHTML = integer;
})
@import url('https://fonts.googleapis.com/css2?family=Nova+Square&display=swap');
body{
    background-color: #333232;
    font-family: 'Nova Square', cursive;
}
#container{
    height: 200px;
    width: 500px;
    border: 10px solid #926981;
    margin: 50px auto;
    background-color: #888169;
}**

h1{
    text-align: center;
    color: white;
}

#number{
    height: 25px;
    width: 250px;
    margin: 50px auto;
    border: 1px solid black;
    text-align: center;
    background-color: white;
}

#increment{
    height: 50px;
    width: 100px;
    margin-top: 50px;
    align-items: center;
    margin-left: 190px;
}
<h1>ClickxTraffic | Earn Clicking</h1>
<div id="container">
    <div id="number">0</div>
    <button id="increment">+</button>
</div>

Please I need help.

javascript html

  • Your code is working as expected, by clicking the "+" button the number is incremented and displayed. Better define what you mean by "save my points".

  • Important you [Dit] your question reducing the problem to a [mcve]. To understand what kind of question serves the site and, consequently, avoid closures and negativities worth reading What is the Stack Overflow and the Stack Overflow Survival Guide (summarized) in Portuguese.

  • What do you mean by saving your points? And how will you use the result of this save?

  • ola Laercio, I need a code for when the person leaves or refresh the page her points continue

  • ola ugusto, I need a code for when the person leaves or refresh the page her points continue

  • Why not save the score on the server, in the database?

  • i am beginner in html js and etc, I don’t have it

  • Do you want to make a game without the back end? If save in the browser will have how to cheat your game.

  • how do I use it? please tell me

  • To save in the browser use Localstorage. Example: To save window.localStorage.setItem('Pontos', '1250'); to read window.localStorage.getItem('Pontos');

  • Could you please tell me the code? I need it so much, create the code, please I need it so much

  • The code is this: window.localStorage.setItem('Pontos', '1250'); that records in the record Pontos the value 1250 and when you want to read in a variable let p = window.localStorage.getItem('Pontos'); which places the value of the record Pontos in p, that is to say p is worth 1250.

  • I’ll test it and tell you

  • tried so and did not: Let add = Document.getElementById('increment'); Let remove = Document.getElementById('decrement') Let int = Document.getElementById('number'); Let integer = 0; &#Xa add.eventaddlistener('click', Function(){ integer += 1; int.innerHTML = integer; }) window.localStorage.setItem('number', '10'); window.localStorage.getItem('number'');

  • could you just put the code? got a little confused

  • @Tiohstitch see an example using your https://codepen.io/AugustoVasques/pen/jOydJE?editors=1111

  • i tried to use your code but when I give Reload on the page and click it back to 1 then n works

Show 12 more comments

1 answer

-2


You can use Local Storage

Definition by documentation:

The localStorage property allows you to access a local Storage object. The localStorage is similar to sessionStorage. The only difference is that as long as the data stored in the localStorage does not expire, the data in sessionStorage has its data cleared when the page session expires - that is, when the page (tab or window) is closed.

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

  • To assign some value within the Storage location:
localStorage.setItem(nomeDoValor, valor);
  • To get some value within the Storage site:
const valor = localStorage.getItem(nomeDoValor);
  • To remove some value within the Storage location:
localStorage.removeItem(nomeDoValor);
  • To clear the entire contents of the Storage site:
localStorage.clear();

* Value name must be a String;

** Value must also be a string, e.g.: If you are going to save an object, you must transform this object into String before saving.

let add = document.getElementById('increment');
let int = document.getElementById('number');

let integer;

window.addEventListener('load', function(){
    integer = localStorage.getItem('pontos') || 0;
})

add.addEventListener('click', function(){
    integer += 1;
    localStorage.setItem('pontos', integer);
    int.innerHTML = integer;
})
@import url('https://fonts.googleapis.com/css2?family=Nova+Square&display=swap');
body{
    background-color: #333232;
    font-family: 'Nova Square', cursive;
}
#container{
    height: 200px;
    width: 500px;
    border: 10px solid #926981;
    margin: 50px auto;
    background-color: #888169;
}**

h1{
    text-align: center;
    color: white;
}

#number{
    height: 25px;
    width: 250px;
    margin: 50px auto;
    border: 1px solid black;
    text-align: center;
    background-color: white;
}

#increment{
    height: 50px;
    width: 100px;
    margin-top: 50px;
    align-items: center;
    margin-left: 190px;
}
<h1>ClickxTraffic | Earn Clicking</h1>
<div id="container">
    <div id="number">0</div>
    <button id="increment">+</button>
</div>

  • I still don’t understand

  • Good answer +1. But I think that those who denied it (my guess) should believe that in the case of a game the points should be saved in the back end.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.