How to compare numerical values of two innerHTML elements?

Question

I am trying to compare the numerical values of elements in Javascript (Still learning, so I am grateful for any help).

Currently I have the code:

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

Any help would be greatly appreciated.

Very unclear what you are asking, provide more info and maybe an image of the expected result — Asons, Nov 12 '16 at 09:32
As per the other comments, your question is too vague, which is why you are getting or will get downvotes. Fastest route to an answer is to go to http://jsfiddle.net and set up a working demo of the issue. We can then quickly examine it without ourselves having to waste time guessing. Post the link to the fiddle back in your answer and you will get a better response. — Vanquished Wombat, Nov 12 '16 at 09:48

score 1 · Answer 1 · answered Nov 12 '16 at 09:49

Don't use innerHTLM, as it returns... HTML. parseInt won't work on that. Use innerText instead:

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

Also, it will help you a lot if you first extract the values, then compare them:

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

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

score 1 · Accepted Answer · edited May 23 '17 at 11:53

The issue here is that you are using the innerHTML when you should be using innerText. See Difference between innerText and innerHTML in javascript

Also, since you mentioned you are new to programming, here are some best practices for you.

If you are going to be comparing the values multiple times you should save the value in a variable instead of constantly using the resources to retrieve the same value.

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)

You are also comparing multiple scores using the same logic so instead of repeating this code you should write a function. A function is a block of code that you can name and call later, see here for more information: 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!"
    }
}

Now you just need to call this function with the values for each set.

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

score 0 · Answer 3 · 2017-11-05T13:03:21.417

Relying on the DOM to store the data is a bad practice. What if you want to use the same logic and data with a different view ? You would have to refactor the entire code. Rather do the opposite, generate the DOM based on a data structure that is the unique source of data for all your application. Thus, you don't need the DOM to manage the data anymore.

In the example below, the data source is an array called "players". Try to add a new player to the array and see how easier it is to manage. Moreover, if you want to change the HTML of the score board, you just have to edit the template once for all players. This template is located in the function called "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>

How to compare numerical values of two innerHTML elements?

3 Answers3