Заявление в javascript для выполнения действия CSS

Question

Я уже возился с java-скриптом за последние несколько дней и пытался написать оператор if для системы отчетов соответствия, которую я создаю.

 if (document.getElementById('team1_score') > document.getElementById('team2_score')){ 
document.getElementById('team1_score').style.color == 'rgb(101, 189, 119)'; 

}

https://jsfiddle.net/ya6d2qbz/5/

То, что я пытаюсь что если партитура TEAM1 больше team2, цвет текста TEAM1 будет черным вместо обычного серого цвета.

Однако я не был успешным. Может кто-нибудь мне помочь?

Answer 1

Первая проблема, которую я вижу, что внутри если блока, вы делаете сравнение и не атрибуции. Вместо == вы должны использовать только =.

Вторая проблема заключается в том, что вы должны получить доступ к TextContent из элемента HTML, как:

document.getElementById('team1_score').textContent 

Поскольку вы сравниваете то, что два числа в виде строки, вы также должны разобрать строку в число. Кроме того, отсутствует сравнение в случае команды 2 победы, оставляя Javascript так:

if (Number(document.getElementById('team1_score').textContent) > Number(document.getElementById('team2_score').textContent)){ 
    document.getElementById('team1_score').style.color = 'rgb(101, 189, 119)'; 
    document.getElementById('team1_name').style.color = 'rgb(101, 189, 119)'; 
}else if (Number(document.getElementById('team2_score').textContent) > Number(document.getElementById('team1_score').textContent)){ 
    document.getElementById('team2_score').style.color = 'rgb(101, 189, 119)'; 
    document.getElementById('team2_name').style.color = 'rgb(101, 189, 119)'; 
} 

Вот скрипка с все работает как шарм: https://jsfiddle.net/7p1v1wt7/

Answer 2

Есть две проблемы с вашим кодом.

Во-первых, можно использовать сравнительный знак равенства (==), что означает, что вы сравнения ли равно цвет, а не присваивающей элемента использовать этот цвет элемента. Он должен быть ....style.color = 'rgb(101, 189, 119)';.

Во-вторых, вы ориентируетесь на элемент DOM, а не на элемента DOM. document.getElementById('team1_score') должно быть document.getElementById('team1_score').innerHTML.

Полный JavaScript должен быть:

if (document.getElementById('team1_score').innerHTML > document.getElementById('team2_score').innerHTML) { 
    document.getElementById('team1_score').style.color = 'rgb(101, 189, 119)'; 
} 

Обратите внимание, что вы также должны быть разборе оба innerHTML содержимого как целые числа, чтобы убедиться, что вы можете иметь одно значение «больше», чем другие :)

parseInt(document.getElementById('team1_score').innerHTML); 

Я создал новую скрипку, демонстрирующую правильную работу here.

Надеюсь, это поможет! :)

Answer 3

Вы можете попробовать это.

if (document.getElementById('team1_score').innerText > document.getElementById('team2_score').innerText){ 

    document.getElementById('team1_score').style.color = 'rgb(101, 189, 119)'; 
    document.getElementById('team2_score').style.color = 'rgb(0, 0, 0)'; 
} 
else if (document.getElementById('team1_score').innerText < document.getElementById('team2_score').innerText){ 
    document.getElementById('team2_score').style.color = 'rgb(101, 189, 119)'; 
    document.getElementById('team1_score').style.color = 'rgb(0, 0, 0)'; 
} 
else { // some other color for tie 
    document.getElementById('team1_score').style.color = 'rgb(0, 0, 0)'; 
    document.getElementById('team2_score').style.color = 'rgb(0, 0, 0)'; 
} 

Answer 4

Вы можете сделать следующее с вашей текущей разметки.

Используйте функцию ниже, и класс, названный .highlight в этом примере:

(function() { 
 

 
    //Cache elements, values and class. 
 
    var highlight = "highlight", 
 
    team1 = document.getElementById('team1_score'), 
 
    //Parse to Int the Inner Text 
 
    team1Score = parseInt(team1.innerText), 
 
    team2 = document.getElementById('team2_score'), 
 
    //Parse to Int the Inner Text 
 
    team2Score = parseInt(team2.innerText); 
 

 
    //Get highest number 
 
    var highestScore = Math.max(team1Score, team2Score); 
 

 
    //Highlight the winner. 
 
    if (highestScore === team1Score) { 
 

 
    team2.classList.remove(highlight); 
 
    team1.classList.add(highlight); 
 

 
    } else if (highestScore === team2Score) { 
 

 
    team1.classList.remove(highlight); 
 
    team2.classList.add(highlight); 
 

 
    } 
 

 
})();

/* Dont mess with any of this */ 
 

 
.season_date { 
 
    color: #9C9C9C; 
 
    text-align: center; 
 
} 
 

 
#team1_name { 
 
    display: inline-block; 
 
    padding-right: 12px; 
 
    font-size: 20px; 
 
    font-weight: 700; 
 
    color: #1d1e1f; 
 
} 
 

 
.team2_name { 
 
    display: inline-block; 
 
} 
 

 
.team1_logo { 
 
    padding-right: 30px; 
 
    vertical-align: middle; 
 
} 
 

 
#team2_logo { 
 
    padding-left: 30px; 
 
    vertical-align: middle; 
 
} 
 

 
#time { 
 
    font-size: 12px; 
 
    color: #48494a; 
 
    font-weight: 600; 
 
    padding-left: 90px; 
 
    padding-right: 90px; 
 
    text-align: center; 
 
} 
 

 
.scoreboard { 
 
    text-align: center; 
 
} 
 

 
#team1_score { 
 
    font-size: 24px; 
 
    font-weight: 600; 
 
} 
 

 
#team2_score { 
 
    font-size: 24px; 
 
    font-weight: 600; 
 
    color: #a5a6a7; 
 
} 
 

 
#team2_name { 
 
    padding-left: 12px; 
 
    font-size: 20px; 
 
    font-weight: 700; 
 
    color: #a5a6a7; 
 
} 
 

 
.highlight { 
 
    color: rgb(101, 189, 119); 
 
}

<!-- Header --> 
 

 
<p class="season_date">Season 1 Day 1</p> 
 

 
<div class="scoreboard"> 
 

 
    <a id="team1_name">Tiannamen Squares</a> 
 

 
    <img class="team1_logo" src="http://images.sphaxball.com/teams/50/tiananmen-squares.png" title="Tiannamen Squares"> 
 

 
    <a id="team1_score">2</a> 
 

 
    <a id="time">FT</a> 
 

 
    <a id="team2_score">1</a> 
 

 
    <img id="team2_logo" src="http://images.sphaxball.com/teams/50/colorado-stoners.png"> 
 

 
    <a id="team2_name">Colorado Stoners</a> 
 
</div>

Answer 5

Вы должны получить текст из элемента первого, прежде чем их можно сравнить. Также вам нужно использовать функцию parseInt.

Вот простое решение в JavaScript:

var team1 = document.getElementById('team1_name'); 
var team2 = document.getElementById('team2_name'); 
var score1 = document.getElementById('team1_score'); 
var score2 = document.getElementById('team2_score'); 
var winningColor = 'rgb(101, 189, 119)';  

if(parseInt(score1.innerHTML) > parseInt(score2.innerHTML)){ 
    score1.style.color = winningColor; 
    team1.style.color = winningColor; 
}else if(parseInt(score1.innerHTML) < parseInt(score2.innerHTML)){ 
    score2.style.color = winningColor; 
    team2.style.color = winningColor; 
}//does nothing if equal 

Я также изменил свой CSS, чтобы сделать оба цвета такой же по умолчанию:

#team1_score, 
#team2_score 
{ 
font-size: 24px; 
font-weight: 600; 
color: #a5a6a7; 
} 

#team1_name 
{ 
display: inline-block; 
padding-right: 12px; 
font-size: 20px; 
font-weight: 700; 
color: #a5a6a7; 
} 

https://jsfiddle.net/bryangators/ya6d2qbz/13/