HTML incrementing voting system

Question

I'm pretty new to html, I am trying to show a value on my web page that increments when a button is pressed.

Here is my code:

<script type ="text/javascript">
     var likesSD = 0;
     var dislikesSD= 0;
</script>
    <button class="like" onclick="likes++">I like!</button>
<script>document.write(likesSD);</script>

The value on the screen does not change when the button is pushed. Is there a way I can do that without using a database?

Few things: There is no `likes` variable. You shouldn't use `document.write`. This will lose the *likes* on page load. The user won't see likes being incremented because it's only written to the page on load. — CodingIntrigue, Dec 11 '13 at 12:38
Already mentioned [here](http://stackoverflow.com/questions/719194/how-can-you-make-a-vote-up-down-button-like-in-stackoverflow). — fiskolin, Dec 11 '13 at 12:38

DontVoteMeDown · Accepted Answer · 2013-12-11T12:55:28.437

6

You can do this:

<div id="likes"></div>

<script type ="text/javascript">
    var likes = 0;

    function IncreaseLikes()
    {
        likes++;
        document.getElementById("likes").innerHTML = likes;
    }
</script>

<input type="button" class="like" onclick="IncreaseLikes()" value="I like!" />

Use some element to hold the value, It's not nice to use document.write();
I have changed your button to input type="button";
Whithout database the information will be lost on page refresh. You can use localStorage(supported in all modern browsers) in order to keep the value saved, but only in the browser. Still not valid for a real votting pool.

edited Dec 11 '13 at 12:55

answered Dec 11 '13 at 12:39

DontVoteMeDown

21,122
10
69
105

You declared the variable `likesSD` but you are incrementing `likes`. – Philipp Dec 11 '13 at 12:41
1

there is no variable `likes`. Did you mean `likesSD++` and `...innerHTML = likesSD`? – jalynn2 Dec 11 '13 at 12:41
1

document.getElementById("likes") will not work if you use class="like" instead of id="like" – Bas van Dijk Dec 11 '13 at 12:42
@osi `likes` is the `id` of the `div`. Please read carefully. – DontVoteMeDown Dec 11 '13 at 12:43
1

@DontVoteMeDown you are totally right, sorry to overlooked that. You might want to move all the html together for clearer reading – Bas van Dijk Dec 11 '13 at 12:44

score 1 · Answer 2 · answered Dec 11 '13 at 12:38

1

You have to define a function that increments your like / dislike counter and then writes it to the document. Then map that function to the onclick event of your button:

<script type ="text/javascript">
     var likesSD = 0;
     var dislikesSD= 0;

     function like() {
         likesSD++;
         document.getElementById("likes").innerHTML = likesSD;
     }
</script>
    <button class="like" onclick="like()">I like!</button>
    <div id="likes"></div>

answered Dec 11 '13 at 12:38

RononDex

4,143
22
39

1

This won't work. `document.write` will replace the page body, including the markup for the ` – CodingIntrigue Dec 11 '13 at 12:40
Really? I thought document.write just writes to the end of the html document? – RononDex Dec 11 '13 at 12:40
It's context-based, but in the context above that is what will happen – CodingIntrigue Dec 11 '13 at 12:42

HTML incrementing voting system

2 Answers2