js点击赞成和反对实现投票,对应的票数累加
时间: 2024-03-01 10:16:08 浏览: 64
你可以通过JavaScript来实现点击赞成和反对按钮后对应的票数累加。首先,你需要为赞成和反对按钮分别添加点击事件的监听器。然后,在点击事件处理函数中,你可以通过修改相应的票数变量来实现累加的效果。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<body>
<h2>投票</h2>
<p>赞成: <span id="upvotes">0</span></p>
<button id="upvoteBtn">赞成</button>
<p>反对: <span id="downvotes">0</span></p>
<button id="downvoteBtn">反对</button>
<script>
// 初始化票数变量
let upvotes = 0;
let downvotes = 0;
// 获取赞成和反对的按钮元素
const upvoteBtn = document.getElementById('upvoteBtn');
const downvoteBtn = document.getElementById('downvoteBtn');
// 获取显示票数的元素
const upvotesDisplay = document.getElementById('upvotes');
const downvotesDisplay = document.getElementById('downvotes');
// 添加点击事件监听器
upvoteBtn.addEventListener('click', function() {
// 点击赞成按钮时,赞成票数加1
upvotes++;
// 更新显示的票数
upvotesDisplay.textContent = upvotes;
});
downvoteBtn.addEventListener('click', function() {
// 点击反对按钮时,反对票数加1
downvotes++;
// 更新显示的票数
downvotesDisplay.textContent = downvotes;
});
</script>
</body>
</html>
```
在上述代码中,我们通过`upvotes`和`downvotes`两个变量来分别记录赞成和反对的票数。当点击对应的按钮时,相应的变量会加1,并且通过修改对应的元素的`textContent`属性来更新显示的票数。你可以根据自己的需求进一步扩展和美化这个功能。
阅读全文