Why does my function give me "this is not red"?

Question

So I'm trying to see if a cell has a red background, when I put test in the inputbox
and click the button, I receive the message "this is not red". Could someone please
explain to me how I could make it say "this is red"?

var colors = ["rgb(255, 0, 0)"];

function testfunction() {
  var location = document.getElementById("userinput").value;
  if (document.getElementById(location).style.backgroundColor == colors[0]) {
    alert("This is red");
  } else {
    alert("This is not red");
  }
}

.red {
  background-color: rgb(255, 0, 0);
}

<table>
  <tr>
    <td id="test" class="red"> a1 </td>
    <td id="test2"> b1 </td>
  </tr>
  <tr>
    <td id="test3"> a2 </td>
    <td id="test4" class="red"> b2 </td>
  </tr>
</table>
<input id="userinput" type="text">

<button id="button" onclick="testfunction()"> Button </button>

because `document.getElementById(location).style.backgroundColor` is not equal to `colors[0]`. Log the background color to debug — Ayush Gupta, Nov 20 '19 at 11:02
what's this? `id=t est` why the space in each `id`? **id's** do not allow spaces. — Roy Bogado, Nov 20 '19 at 11:04
`Element.style` gives you the inline-styles defined for this Element. But you set the `background-color` in the css. Check out [getComputedStyle()](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) — Thomas, Nov 20 '19 at 11:05
Does this answer your question? [Get current applied style with JS](https://stackoverflow.com/questions/28203363/get-current-applied-style-with-js) — NineBerry, Nov 20 '19 at 11:15

score 4 · Accepted Answer · edited Nov 20 '19 at 11:12

By default node.style wont give you computed styles. You have to use window.getComputedStyle(element) to check computed styles .

So following code should work

var colors = ["rgb(255, 0, 0)"];

function testfunction() {
  var location = document.getElementById("userinput").value;
  if (getComputedStyle(document.getElementById(location)).backgroundColor == colors[0]) {
    alert("This is red");
  } else {
    alert("This is not red");
  }
}

score 0 · Answer 2 · answered Nov 20 '19 at 11:13

Use getComputedStyle() to get the actual style used at runtime. The style property of the element will only give you information on the inline style of the element.

var colors = ["rgb(255, 0, 0)"];

function testfunction() {
  var location = document.getElementById("userinput").value;
  var style = getComputedStyle(document.getElementById(location));

  if (style.backgroundColor == colors[0]) {
    alert("This is red");
  } else {
    alert("This is not red");
  }
}

.red {
  background-color: rgb(255, 0, 0);
}

<table>
  <tr>
    <td id="test" class="red"> a1 </td>
    <td id="test2"> b1 </td>
  </tr>
  <tr>
    <td id="test3"> a2 </td>
    <td id="test4" class="red"> b2 </td>
  </tr>
</table>
<input id="userinput" type="text">

<button id="button" onclick="testfunction()"> Button </button>

Why does my function give me "this is not red"?

2 Answers2