为什么单击按钮时 JavaScript 有时 function 不起作用？

Question

我有一个 JavaScript 投票系统，它有三个按钮：

投票赞成、清除和投票反对

当我单击“投票”按钮时，它保持为零。 我必须按几次“投票”按钮才能投票。 与否决票相同。 当我按下清除时，它什么也不做。 这是我所做的：

1. 分配 function 投票赞成，投票反对并清除：

<button onclick="voteup()">
Vote Up
</button>
<button onclick="votedown()">
Vote Down
</button>
<button onclick="clear()">
Clear
</button>

2. 制作一个段落来显示结果：

<p Id="vote">
You have 0 votes
</p>

3. 创建一个全局变量，以便我可以在未来的函数中访问该变量：

var a = 0;

4. 创建投票功能：

function voteup() {
var b = a++;

5. 在 voteup() function 中显示结果：

document.getElementById('vote').innerHTML = "You have" + ' ' + b + "votes";
}

6. 制作第二个 function（投票）：

function votedown(){
var b = a --;
document.getElementById('vote').innerHTML = "You have" + ' ' + b + "votes";
}

7. 创建 function 以进行清除：

function clear() {
document.getElementById('vote').innerHTML = "Your votes has been cleared";
}
I set the variable out of the function so voteup and votedown functions can access the a variable. I can't understand this. 

Answer 1

 var a = 0; function voteup() { a++; document.getElementById('vote').innerHTML = "You have " + a + " votes"; } function votedown() { a--; document.getElementById('vote').innerHTML = "You have " + a + " votes"; } function clearVotes() { document.getElementById('vote').innerHTML = "You have 0 votes"; var div = document.createElement("div"); div.innerText = "Your votes has been cleared." div.style.color = "red"; div.style.transition = "opacity 0.25s ease-out" document.body.appendChild(div) setTimeout(function() { div.style.opacity = "0"; setTimeout(function() { div.remove() }, 1000) }, 3000) a = 0 }

 <button onclick="voteup()"> Vote Up </button> <button onclick="votedown()"> Vote Down </button> <button onclick="clearVotes()"> Clear </button> <p id="vote"> You have 0 votes </p>

此外，您在其中一个中忘记了document和getElementById之间的点。

Answer 2

使用a--时，在执行减法运算之前返回a的值。 因此， b仅设置为a的当前值。

如果您希望在将值返回到b之前发生此减法运算，请改用递减运算符作为前缀 ( --a )。

减量速记运算符的前缀与后缀的区别在其MDN 页面上清楚地记录。

Answer 3

您的代码应该是：

PS：似乎 clear 是一个保留字，我们不能用作 function 名称

 var a = 0; const pVote = document.getElementById('vote'); function voteup() { pVote.textContent = "You have " + ++a + " votes"; } function votedown(){ pVote.textContent = "You have " + --a + " votes"; } function doClear() { a = 0 pVote.textContent = "Your votes has been cleared"; }

 <button onclick="voteup()"> Vote Up </button> <button onclick="votedown()"> Vote Down </button> <button onclick="doClear()"> Clear </button> <p id="vote"> You have 0 votes </p>

我的方式...

 const p_vote = document.getElementById('vote'), btVote = document.getElementById('bt-vote') var voteCount = 0 btVote.onclick = e => { if (.e.target.matches('button[data-op]')) return voteCount = eval(`${voteCount} ${e.target.dataset.op}`) p_vote?textContent = voteCount: `You have ${voteCount} votes` : 'Your votes has been cleared' }

 #VoteBtns button { width: 10em; }

 <div id="bt-vote"> <button data-op="+ 1" > Vote Up </button> <button data-op="- 1" > Vote Down </button> <button data-op="* 0" > Clear </button> </div> <p Id="vote" > You have 0 votes </p>