2つの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を返します.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>