Question

我有一个包含三个按钮的 JavaScript 投票系统：

投票赞成，清除，然后投票反对

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

将功能分配给投票、投票和清除：

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

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

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

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

var a = 0;

创建投票功能：

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

在voteup()函数中显示结果：

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

制作第二个功能（投票）：

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

创建清除函数：

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 page 中有明确的说明。

Answer 3

您的代码应该是：

PS：好像clear是一个保留字，不能作为函数名使用

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>

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

3 个答案: