TransWikia.com

Retrieve previous position of an Image on refresh page

Stack Overflow Asked by Roel Thijssen on January 1, 2022

So I’m making a Camel Race.
Every time I hit a button the camel moves a few pixels to the right.
But after refreshing the page, the camel goes back to it’s origional position.

Is there a way to retrieve the previous position of the camel?

HTML

<td id="button01"><button class="sale" onClick="clickME()">SALE!</button></td>
<td class="counter" style="font-size: 15; width: 1000;">sales: <a id="team1">0</a></td>

and 

<th id="img01"><img class="camel1" style="margin: -135 auto; width:150;" src="camel1.gif"></th>

Script:

var camel1 = document.getElementById("img01");
var link = document.getElementById("button01");
link.addEventListener("click", move01);

var camel1X = 0;
function move01(e) {
   camel1X += 2;
   camel1.style.position = "relative";
   camel1.style.transform = "translateX(" + camel1X + "px)";
   e.preventDefault();     //prevents the page from redirecting
}

 var team1 = 0;
    function clickME() {
        team1 += 1;
        document.getElementById("team1").innerHTML = team1;
 }

Script says:

On click: button01, img01 moves 2 pixels to the right and the counter adds +1.

I tried to make it as clear as possible.

Thanks in advance.

Roel

javascript

2 Answers

I tried the following but it's not working. What am I doing wrong?

var camel1 = document.getElementById("img01");
var link = document.getElementById("button01");
link.addEventListener("click", move01);

var camel1 = document.getElementById("img01");
var link = document.getElementById("self01");
link.addEventListener("click", move011);

var camel1X = localStorage.getItem('camel1_position');
camel1X = camel1X == null ? 0 : camel1X;
function move01(e) {
   camel1X += 2;
   camel1.style.position = "relative";
   camel1.style.transform = "translateX(" + camel1X + "px)";
   localStorage.setItem('camel1_position', camel1X);
   e.preventDefault();     //prevents the page from redirecting
}

var camel1X = localStorage.getItem('camel1_position');
camel1X = camel1X == null ? 0 : camel1X;
function move011(e) {
   camel1X += 4;
   camel1.style.position = "relative";
   camel1.style.transform = "translateX(" + camel1X + "px)";
   localStorage.setItem('camel1_position', camel1X);
   e.preventDefault();     //prevents the page from redirecting
}

 var team1 = 0;
    function clickME() {
        team1 += 1;
        document.getElementById("team1").innerHTML = team1;
 }
 
 var team11 = 0;
    function clickME1() {
        team11 += 1;
        document.getElementById("team11").innerHTML = team11;
 }

Answered by Roel Thijssen on January 1, 2022

JS LocalStorage is want you need : https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Each time you move the image, you call :

localStorage.setItem('camel1_position', camel1X);

And on load of the page (0 is the default value) :

var camel1X = localStorage.getItem('camel1_position');
camel1X = camel1X == null ? 0 : camel1X;

Edit : Add a example, can't do a Fiddle because the use of localStorage seems prohibited.

<!DOCTYPE html>
<html>
    <title>Camel race</title>
    <head>
        <style>
            #camel1 {
                display: inline-block;
                height: 30px;
                width: 30px;
                background: brown;
            }
        </style>
    </head>
    <body>
        <button type="button" id="camel1-btn">Move camel 1</button>
        <p>Click count camel 1 : <span id="camel1Count">0</span></p>
        <div id="camel1" class="camel"></div>
        
        <script>
            // init vars for first camel
            var camel1 = document.getElementById("camel1");
            var camel1Btn = document.getElementById("camel1-btn");
            var camel1X = localStorage.getItem('camel1_position'); // load previoux position
            camel1X = camel1X == null ? 0 : parseInt(camel1X);
            var camel1Count = 0;
            
            // set initial camel position
            camel1.style.transform = "translateX(" + camel1X + "px)";

            // click event
            camel1Btn.addEventListener("click", function(e) {
               e.preventDefault();
               
               camel1X += 2;
               camel1.style.transform = "translateX(" + camel1X + "px)";
               localStorage.setItem('camel1_position', camel1X); // save current position
               
               camel1Count++;
               document.getElementById("camel1Count").innerHTML = camel1Count;
            });
        </script>
    </body>
</html>

PS: Try to give a better name for each different things, and avoid using the same variable name for different things on the same scope (Ex: link is used for #button01 and #self01)

Answered by Bazaim on January 1, 2022

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP