如何比較兩個innerHTML元素的數值？

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

這裏的問題是，你的時候，你應該使用的innerHTML正在使用innerText。請參閱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 2

請勿使用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 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>