HTML增量投票系统

Question

我对html非常陌生，我试图在我的网页上显示一个值，当按下按钮时就会增加。

这是我的代码：

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

当按下按钮时，屏幕上的值不会改变。有没有办法不用数据库就能做到这一点？

Answer 1

你可以这样做：

<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!" />

• 使用一些元素来保存这个值，使用document.write()并不好；
• 我把你的按钮换成了input type="button"；
• 如果没有数据库，信息将在页面刷新时丢失。您可以使用localStorage(在所有现代浏览器中都支持)来保存值，但只能保存在浏览器中。对于一个真正的投票池还是无效的。

Answer 2

您必须定义一个函数，该函数递增您类似/不喜欢的计数器，然后将其写入文档。然后将该函数映射到按钮的onclick事件：

<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>