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?

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?

• javascript
• html
• dom-events

Share Improve this question Follow edited Aug 22, 2022 at 12:45 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Dec 11, 2013 at 12:36 user3091077user3091077 3511 silver badge55 bronze badges 2

• 2 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 Commented Dec 11, 2013 at 12:38
• Already mentioned here. – fiskolin Commented Dec 11, 2013 at 12:38

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

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>