Need to fire a call to clickCounter() at page load

Question

I am using the clickCounter function below:

<script>
function clickCounter() {
    if(typeof(Storage) !== "undefined") {
        if (localStorage.clickcount) {
            localStorage.clickcount = Number(localStorage.clickcount)+1;
        } else {
            localStorage.clickcount = 1;
        }
        document.getElementById("result").innerHTML =  localStorage.clickcount ;
    } else {
        document.getElementById("result").innerHTML = "";
    }
}
</script>

I can get onclick=clickCounter to work in a button, which shows the counter values in the code below. However, when the page loads, I can't get the clickCounter() function to fire so that the counter value is shown.

In other words, at page load I need to fire a call to the function so that id="result" has the count values in it.

<script>
  document.getElementById("result").innerHTML =  localStorage.clickcount ;
</script>

<font face="arial" size="3" color="black"><div>
<span id="result"></span> Downloads
</div></font>

This is definitely not all your code. Are you trying to load value from `localStorage`? Are you storing it there? Try `localStorage.getItem('clickcount');`. This is how it's supposed to work. You should put clickcount to localStorage using `localStorage.setItem('clickcount');` — Vitalii Chmovzh, Feb 11 '18 at 22:14
@wrtsvkrfm Are you trying to make this work (I mean the stat counter) for **one user only** or for **multiple users** (so that everybody can see the the total number of downloads)? — Roko C. Buljan, Feb 11 '18 at 23:04

score 1 · Answer 1 · answered Feb 11 '18 at 22:17

1

All you need to do is wrap your setting your .innerHTML inside of a window.onload function:

window.onload = function() {
  //document.getElementById("result").innerHTML = localStorage.clickcount;
  document.getElementById("result").innerHTML = 3;
}

<div>
  <span id="result"></span> Downloads
</div>

In addition to this, the <font> tag has been deprecated since HTML 4.0.1, and is both obsolete and unsupported in HTML5. Please use CSS for styling instead.

Hope this helps!

answered Feb 11 '18 at 22:17

Obsidian Age

41,205
10
48
71

Maybe is better to use document.onload instead of window.onload in this specific case – Sinisa Bobic Feb 11 '18 at 22:20
1

`window.onload` is both better supported and allows [**separation of structure from the action**](https://stackoverflow.com/a/588048/2341603). It's slightly slower to execute, though ensures that everything has loaded. In fact, you'll notice that `document.onload` won't actually show the number at all in the above example :) – Obsidian Age Feb 11 '18 at 22:29
@ObsidianAge from a UX perspective why would you want to watch an empty `(? Downloads)` all the time being a window triggers a loaded state? - Bad bad bad. Everything you have available should be shown to the user - **ASAP!** specially if the element is in viewport or above the fold. – Roko C. Buljan Feb 11 '18 at 23:11

score 0 · Accepted Answer · answered Feb 11 '18 at 22:16

0

Call your javascript after the html tags.

<font face="arial" size="3" color="black"><div>
<span id="result"></span> Downloads
</div></font>
<script>
  document.getElementById("result").innerHTML =  localStorage.clickcount ;
</script>

Working fiddle

answered Feb 11 '18 at 22:16

ztadic91

2,774
1
15
21

Worked like a charm! Thanks. – Feb 11 '18 at 22:29

Sinisa Bobic · Answer 3 · 2018-02-11T22:41:06.713

0

First put that into some function

function clickCounter()
{
    document.getElementById("result").innerHTML =  localStorage.clickcount;
}

and than to call it like this

<body onload="clickCounter();">

or simply you can do it on this way

window.onload = function() 
{
    document.getElementById("result").innerHTML =  localStorage.clickcount;
}

edited Feb 11 '18 at 22:41

answered Feb 11 '18 at 22:17

Sinisa Bobic

1,311
10
15

Roko C. Buljan · Answer 4 · 2018-02-11T22:57:53.910

At the time the DOM parser pauses to interpret your <script> tag with document.getElementById("result").... there's no such #result element in the DOM tree.
Instead put your <script> tag right before the closing </body> tag to make sure all the DOM is read & ready to be manipulated.
The <font> tg is obsolete, use CSS instead.
Don't use inline JS onclick. It's bad practice and makes code hard to maintain.
Use Element.addEventListener() instead
In 2018 you should not care much about 12+years old browsers IE6, 7.
Hope you know that your counter will work for one user only. Other users will not seee the total number of downloads. For such you'll need a small server-side script to store your counter into Flat-File or into a database table.

Finally: (jsFiddle live demo)

CSS

.text-small { font: 11px/1.4 sans-serif; }

HTML

<div>
  <button id="download">DOWNLOAD</button>
  <span class="text-small">
    (<span id="result"></span> Downloads)
  </span>
</div>

JS (in <script> tags right before closing </body>)

function clickCounter() {
  // Read fron localstorage or fallback to 0
  document.getElementById("result").innerHTML =  localStorage.clickcount || 0;
}

document.getElementById("download").addEventListener("click", function() {
  localStorage.clickcount = Number(localStorage.clickcount) + 1;
  clickCounter(); // Do on click 
});

clickCounter();   // and on DOM ready

Which is just an improvement of your idea. As mentioned above, a better way to do it:

Store the (+1) number of downloads into your server-side database.
Use localStorage just to insert that a specific user downloaded the item.
Use localStorage to not update the database count if the same user clicks more times the download button (prevent fake hits).

Be aware that this can be also bypassed by clearing the localStorage and hitting again the Download button - but it's OK for not-so-tech-savvy users.

Thanks for all the helpful comments - looks like there's a lot of deprecated info out there that should be wiped. So, my bad for using it. I did notice that the counter is only for one user, so I'll need to write a SQL and aspx server side. — , Feb 13 '18 at 01:06

Need to fire a call to clickCounter() at page load

4 Answers4