Question

我正在尝试比较Javascript中的元素的数值（仍在学习，所以我很感激任何帮助）。

目前我有代码：

if (parseInt(document.getElementById("player1").innerHTML) > parseInt(document.getElementById("player2").innerHTML)) {
  document.getElementById("gametitle").innerHTML = "Player 1 wins!"
} else if (parseInt(document.getElementById("player2").innerHTML) > parseInt(document.getElementById("player1").innerHTML)) {
  document.getElementById("gametitle").innerHTML = "Player 2 wins!"
} else if (parseInt(document.getElementById("player1").innerHTML) > parseInt(document.getElementById("computer1").innerHTML)) {
  document.getElementById("gametitle").innerHTML = "You win!"
} else if (parseInt(document.getElementById("player1").innerHTML) > parseInt(document.getElementById("computer2").innerHTML)) {
  document.getElementById("gametitle").innerHTML = "You win!"
} else if (parseInt(document.getElementById("player1").innerHTML) > parseInt(document.getElementById("computer3").innerHTML)) {
  document.getElementById("gametitle").innerHTML = "You win!"
} else if (parseInt(document.getElementById("computer1").innerHTML) > parseInt(document.getElementById("player1").innerHTML)) {
  document.getElementById("gametitle").innerHTML = "You lose!"
} else if (parseInt(document.getElementById("computer2").innerHTML) > parseInt(document.getElementById("player1").innerHTML)) {
  document.getElementById("gametitle").innerHTML = "You lose!"
} else if (parseInt(document.getElementById("computer3").innerHTML) > parseInt(document.getElementById("player1").innerHTML)) {
  document.getElementById("gametitle").innerHTML = "You lose!"
} else {
  document.getElementById("gametitle").innerHTML = "There's an error!"
}

非常感谢任何帮助。

Answer 1

不要使用innerHTLM，因为它返回... HTML。 parseInt不适用于此。请改用innerText：

if (parseInt(document.getElementById("computer3").innerText) > parseInt(document.getElementById("player1").innerText)) {
   // Do something
}

此外，如果您首先提取值，它会对您有所帮助，然后比较它们：

var computer3Score = parseInt(document.getElementById("computer3").innerText);
var player1Score = parseInt(document.getElementById("player1").innerText);

if (computer3Score > player1Score) {
// do something
}

Answer 2

这里的问题是你在使用innerText时正在使用innerHTML。见Difference between innerText and innerHTML in javascript

另外，既然你提到自己是编程新手，那么这里有一些最佳实践。

如果您要多次比较这些值，则应将值保存在变量中，而不是经常使用资源来检索相同的值。

var player1 = parseInt(document.getElementById("player1").innerText)
var player2 = parseInt(document.getElementById("player2").innerText)
var player3 = parseInt(document.getElementById("player3").innerText)

var computer1 = parseInt(document.getElementById("computer1").innerText)
var computer2 = parseInt(document.getElementById("computer2").innerText)
var computer3 = parseInt(document.getElementById("computer3").innerText)

您也在使用相同的逻辑比较多个分数，因此您应该编写一个函数，而不是重复此代码。函数是您可以命名并稍后调用的代码块，有关详细信息，请参阅此处：http://www.w3schools.com/js/js_functions.asp

function compareScores(playerScore,computerScore){
    if (playerScore > computerScore){
        document.getElementById("gametitle").innerText = "You win!"
    } else if (computerScore > playerScore){
        document.getElementById("gametitle").innerText = "You lose!"
    } else {
        document.getElementById("gametitle").innerText = "You Tied!"
    }
}

现在你只需要用每个集合的值来调用这个函数。

compareScores(player1,computer1)
compareScores(player2,computer2)
compareScores(player3,computer3)

Answer 3

依靠DOM来存储数据是一种不好的做法。如果您想使用不同视图的相同逻辑和数据，该怎么办？你必须重构整个代码。相反，相反，基于数据结构生成DOM，该数据结构是所有应用程序的唯一数据源。因此，您不再需要DOM来管理数据了。

在下面的示例中，数据源是一个名为“players”的数组。尝试将新播放器添加到阵列中，看看它是如何更容易管理的。此外，如果您想更改记分板的HTML，您只需要为所有玩家编辑一次模板。该模板位于名为“dataToHtml”的函数中。

var players, tbody, button, indexOf;

players = [
  { name: "John", score: 2 },
  { name: "Mary", score: 1 },
  { name: "Bot 1", score: 4 },
  { name: "Bot 2", score: 3 }
];

indexOf = Array.prototype.indexOf;
button = document.getElementsByTagName("button")[0];
tbody = document.getElementsByTagName("tbody")[0];
tbody.innerHTML = dataToHtml();

button.onclick = function () {
  var i, best, trs;
  best = bestScore();
  trs = tbody.childNodes;
  for (i = 0; i < trs.length; i++) {
    trs[i].style.backgroundColor = (
      players[i].score == best ? "yellow" : "white"
    );
  }
};

tbody.onclick = function (ev) {
  var i, tr, score, name;
  tr = ev.target.parentNode;
  i = indexOf.call(this.childNodes, tr);
  name = players[i].name;
  score = prompt("New score for " + name + " :");
  if (!isNaN(score = parseInt(score, 10))) {
    tr.childNodes[1].textContent = score;
    players[i].score = score;
  }
};

function bestScore () {
  var i, best;
  for (i = 0; i < players.length; i++) {
    if (i == 0 || players[i].score > best) {
      best = players[i].score;
    }
  }
  return best;
}

function dataToHtml () {
  var i, html = "";
  for (i = 0; i < players.length; i++) {
    html += "" 
    + "<tr>" 
    +   "<td>" + players[i].name + "</td>" 
    +   "<td class=\"score\">" + players[i].score + "</td>"
    + "</tr>";
  }
  return html;
}

body, button {
  font: normal 12px Arial;
}

div {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}

table {
  margin-right: 1em;
}

table, th, td {
  border-collapse: collapse;
  border: 1px solid #999;
  padding: .25em;
}

td.score {
  text-align: right;
}

<div>
  <table>
    <thead>
      <tr>
        <th>player</th>
        <th>score</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div><div>
  <p><button type="button">Who wins ?</button></p>
  <p>click a row<br />to change<br />the score</p>
</div>

如何比较两个innerHTML元素的数值？

3 个答案: