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

在比较它们之前，您必须先从元素中获取文本。您还需要使用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/

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

我看到的第一个问题是，在 if 块中，您正在进行比较，而不是归因。而不是==你应该只使用=。

第二个问题是您应该访问html元素的textContent，如：

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 5

您可以使用当前标记执行以下操作。

使用下面的函数和本例中名为.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>

如果在javascript中声明执行CSS动作

5 个答案: