Javascript not being able to select element

Question

Based on he content of text i need to change the color ,for eg:- for PASS green color and for FAIL red color. This contents are in a table in td tag. I have tried to write a js ,but not able to achieve the result.

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
    if (document.getElementById("changeColour").innerHTML == "PASS") {
    document.getElementById("changeColour").style.color = "#FE2E2E";
} 
else if (document.getElementById("changeColour").innerHTML == "FAIL") {
    document.getElementById("changeColour").style.backgroundColor = "blue";





  </script>





   </head>

And my HTML body is is :-

table>
          <caption><h4>SUMMARY</h4></caption>
        <tr>

<tr>
            <td><h6>Operation1</h6></td>
            <td id="changeColor">PASS</td>
        </tr>

        <tr>
            <td><h6>Operation2</h6></td>
            <td><h6 id="changeColor">FAIL</h6></td>

      </tr>
    </table>

Multiple elements can't have the same id. You need to use `class`. — vibhor1997a, Jul 19 '18 at 06:37
What vibhor1997a said, and also typo, `changeColour` in your js, `changeColor` in your html — Rafalon, Jul 19 '18 at 06:38

score 0 · Answer 1 · answered Jul 19 '18 at 06:40

Two things, your script is running even before DOM is ready and secondly id need to be unique. FOr the first case you you can put your script inside $(document).ready or put your script near closing body tag.

Secondly use a common class and use document.querySelectorAll , iterate over this and then check the innerHTML

document.querySelectorAll('.changeColor').forEach(function(item) {
  if (item.innerHTML == "PASS") {
    item.style.color = "#FE2E2E";
  } else if (item.innerHTML == "FAIL") {
    item.style.backgroundColor = "blue";
  }

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <caption>
    <h4>SUMMARY</h4>
  </caption>
  <tr>

    <tr>
      <td>
        <h6>Operation1</h6>
      </td>
      <td class="changeColor">PASS</td>
    </tr>

    <tr>
      <td>
        <h6>Operation2</h6>
      </td>
      <td>
        <h6 class="changeColor">FAIL</h6>
      </td>

    </tr>
</table>

score 0 · Answer 2 · answered Jul 19 '18 at 06:42

You have same id value for both of the element which is not correct. Furthermore, you can use a class name to get the elements and check for PASS and FAIL. Something like this:

var elem = document.getElementsByClassName('changeColor');
for(var i=0; i<elem.length; i++){
  if(elem[i].innerHTML === 'PASS'){
    elem[i].style.color = "green";
  } else {
    elem[i].style.color = "red";
  }
}

</style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <table>
<caption><h4>SUMMARY</h4></caption>
  <tr>

  <tr>
  <td><h6>Operation1</h6></td>
  <td class="changeColor">PASS</td>
</tr>

<tr>
  <td><h6>Operation2</h6></td>
  <td><h6 class="changeColor">FAIL</h6></td>

</tr>
    </table>

score 0 · Accepted Answer · answered Jul 19 '18 at 06:44

You can use class to identify multiple rows.As id needs to be unique.

var elems = document.getElementsByClassName("changeColor");

for(var i=0; i<elems.length; i++){
  if(elems[i].innerText == "PASS"){
      elems[i].style.color = "#FE2E2E";
  }else{
      elems[i].style.color = "blue";
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  
And my HTML body is is :-

<table>
          <caption><h4>SUMMARY</h4></caption>
        <tr>

<tr>
            <td><h6>Operation1</h6></td>
            <td class="changeColor">PASS</td>
        </tr>

        <tr>
            <td><h6>Operation2</h6></td>
            <td><h6 class="changeColor">FAIL</h6></td>

      </tr>
    </table>

Javascript not being able to select element

3 Answers3