Как сравнить числовые значения двух внутренних элементов HTML?

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 для управления данными.

В приведенном ниже примере источником данных является массив под названием «игроки». Попробуйте добавить нового игрока в массив и посмотреть, как проще управлять. Более того, если вы хотите изменить 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>