Counters show permanently even if onclick

Question

I have the following entry in a table:

<tr>
    <td class="right-middle user">Name</td>
    <td class="right-middle done">
        <div onload="clickCounter()" id="result"></div>
    </td>
    <td class="right-middle check">
        <img src="img/check.png" onclick="clickCounter()">
    </td>
    <td class="right-middle undone">
        <div onload="addcounter()" id="result2"></div>
    </td>
    <td class="right-middle uncheck">
        <img src="img/uncheck.png" onclick="addCounter()">
    </td>
</tr>

and the following javascript:

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 = "Sorry, your browser does not support web storage...";
    }
}

document.getElementById("result").innerHTML = localStorage.clickcount;


function addCounter() {
    if (typeof (Storage) !== "undefined") {
        if (localStorage.clickcounts) {
            localStorage.clickcounts = Number(localStorage.clickcounts) + 1;
        } else {
            localStorage.clickcounts = 1;
        }
        document.getElementById("result2").innerHTML = localStorage.clickcounts;
    } else {
        document.getElementById("result2").innerHTML = "Sorry, your browser does not support web storage...";
    }
}

document.getElementById("result2").innerHTML = localStorage.clickcounts;

I want both counters to be displayed on the screen all the time, even after refreshing the page without having to press the button to see the value. I have used this bits of code out of the table and they work fine. Can anyone help me understand why do the counters not display all the time on the screen?

@BasvanStein — Stackoverflow has supported [inline live demos](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) for over a year. There's no need to depend on a third party site to host parts of a question or answer any more. — Quentin, Nov 01 '15 at 15:06

score 1 · Accepted Answer · edited May 23 '17 at 12:23

1

Div elements don't have load events. Only elements which get their content from other URLs (like images and frames) and the document itself do.

Since you are using intrinsic event attributes ([problematic though they are](Why can't I call a function named clear from an onclick attribute? )), this would have been picked up if you had used a validator.

Either:

Just run the functions in a script element that appears after the elements you want to interact with or
Use the document's load event

edited May 23 '17 at 12:23

Community

1
1

answered Nov 01 '15 at 15:06

Quentin

914,110
126
1,211
1,335

http://jsfiddle.net/g334tgby/1/ i have asked a similar question a few weeks ago and i was provided with this working fiddle which i could implement in ohter cases. here onload worked with div – Alex Resiga Nov 01 '15 at 15:10
@AlexResiga — No, it doesn't. I [changed](http://jsfiddle.net/g334tgby/2/) the function to erase the content of the body. If the load event on the div worked, the body would immediately vanish, but it doesn't until you click the button. – Quentin Nov 01 '15 at 15:12
oh, i see.i'm quite a beginner so could you show me how to make the counter display on the screen all the time? a fiddle could really help – Alex Resiga Nov 01 '15 at 15:16

score 1 · Answer 2 · answered Nov 01 '15 at 15:06

1

The onload() event cannot be used on any other element but a limited set of tags: <body> <frame> <frameset> <iframe> <img> <link> <script>

answered Nov 01 '15 at 15:06

Griffith

3,229
1
17
30

Counters show permanently even if onclick

2 Answers2