user7149293 user7149293 - 25 days ago 6
HTML Question

How to compare numerical values of two innerHTML elements?

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.

Answer

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)