Replace element after amount of page refreshes

Question

Today, I was thinking if a javascript is possible to replace an element after refreshing the page 10 times specifically. I would really need this to replace an element after amount of page refreshes to make it static. I was trying to code it but all, I coded so far is to replace it after clicking on the element 3 times. And localStorage logs it and creates a key so the webserver remembers the change. All, I want is the element to replace its code with urls code after 10 refreshes on the page.

var count = parseInt(localStorage.getItem("count"), 10) || 0;
function loadMyPage() {
    if (count >= 3)
        $("#id-2").load("yoinkexecutor2.html");
    }
}

$(document).ready( function () {
    loadMyPage();
    $("#id-2").on("click", function() {
        localStorage.setItem("count", count += 1);
        loadMyPage();
    });
});

I prefer to you for using Cookie instead localStorage. thats very easy and usable. you can see example on this url: https://stackoverflow.com/questions/14573223/set-cookie-and-get-cookie-with-javascript — Mohammadreza Yektamaram, Sep 23 '19 at 16:19
Besides having a small syntax error around you if statement in `loadMyPage`, the code you provided seems to work find in a [fiddle](https://jsfiddle.net/brettgaynor/j84qwm2k/2/). — bgaynor78, Sep 23 '19 at 16:19
understandable @MohammadrezaYektamaram I might of used localStorage since it seems simpler. Also, I have tried the code, I posted in fiddle and it doesn't seem to work so, I just upload it to my webserver and it works fine. But yeah, I just need to make it replace the element after refreshing the page. — NateVang, Sep 23 '19 at 16:24
yea, hah fiddle is more like client sided javascript experimentation. — NateVang, Sep 23 '19 at 16:27
You actually can store localStorage items. It just logs to the devtools console, under for instance Application, if you are using Chrome. The only thing I found is that you have to clear that localStorage item, and hit the "Run" button at the top of the fiddle to start the count over. — bgaynor78, Sep 23 '19 at 16:28
@NateVang agree, but that was what it looked like you were doing from your code. But to your point, `.load()` won't really work. — bgaynor78, Sep 23 '19 at 16:29
@bgaynor78 ah then how would, I go about atleast changing the element after refreshing the page. Maybe to display: none; — NateVang, Sep 23 '19 at 16:32
Yeah, if you want to not show it, sure. But the `.load()` method you're using should replace the content of the `id-2` div with whatever comes back when `yoinkexecutor2.html` is loaded. — bgaynor78, Sep 23 '19 at 16:36
I agree it replaces the element when id="id-2" is assigned to it with yoinkexecutor2.html code. Whatever returns from yoinkexecutor2.html. Now maybe hiding the element with display: none; but would be simpler. — NateVang, Sep 23 '19 at 16:44
Something like $("#id-2").style('display', 'none'); @bgaynor78 — NateVang, Sep 23 '19 at 16:56
If you're using Jquery, it's the method is `.css()` to `.css('display', 'none');` — bgaynor78, Sep 23 '19 at 17:02
alright, great. and are there any documentations on refreshment of page and maybe how to change the element after refreshing the page. i haven't found any so far. but if you have some knowledge, i'd appreciate. @bgaynor78 — NateVang, Sep 23 '19 at 17:06

score 0 · Answer 1 · answered Sep 23 '19 at 17:26

Ok, I updated the fiddle to work when the fiddle is reloaded. Don't worry too much about my mockHtmlReq function as it's just to mock a request for HTML content, similar to .load().

The only thing I changed was inside the $(document).ready()

$(document).ready( function () {
    loadMyPage();
    localStorage.setItem("count", count += 1);
});

Basically what happens is everytime the page reloads we are just incrementing up our count value stored in localStorage.

Replace element after amount of page refreshes

1 Answers1