CODEWITHSUNDEEP
javascriptcolors
Best Friday
Best Friday

Reputation: 89

change text color depend by value

The data in my table changes with the click of a button. I wanted the items to turn red if they were negative and green if they were positive. Can you help me how to do this?

var lastpr = 100

function act1(){
  const tds =document.querySelector("table").querySelectorAll("tr")[Math.floor(Math.random() * 3)+0].querySelectorAll("td");
    

tds.forEach((item) => {
  item.innerHTML = ((Math.floor(Math.random() * 10)-5)/lastpr)*100;
        });
}
<div>
<table class="table1" style="width:100%;font-weight:bold ;font-size:13px;text-align:center; border: 1px solid black;">
        <tr>
             <td>1</td>
             <td>1</td>
             <td>1</td>
             <td>1</td>
        </tr>
        <tr>
             <td>2</td>
             <td>2</td>
             <td>2</td>
             <td>2</td>
        </tr>
        <tr>
             <td>3</td>
             <td>3</td>
             <td>3</td>
             <td>3</td>
        </tr>           
</table>
</div>
<button onclick="act1()">change</button>

Upvotes: 0

Views: 76

Answers (3)

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48600

You could wrap the value in a <span> tag and apply a class.

var lastpr = 100;

function act1() {
  const tds = document.querySelector("table")
    .querySelectorAll("tr")[Math.floor(Math.random() * 3) + 0]
    .querySelectorAll("td");

  tds.forEach((item) => {
    const
      prevValue = item.textContent,
      newValue = ((Math.floor(Math.random() * 10) - 5) / lastpr) * 100;
    item.innerHTML = `
      <span class="${newValue > 0 ? 'pos' : 'neg'}">
        ${newValue}
      </span>
    `;
  });
}
.pos { color: green; }
.neg { color: red; }

.table1 {
  width: 100%;
  font-weight: bold;
  font-size: 13px;
  text-align: center;
  border: 1px solid black;
}
<div>
  <table class="table1">
    <tr>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3</td>
      <td>3</td>
      <td>3</td>
    </tr>
  </table>
</div>
<button onclick="act1()">change</button>

Upvotes: 1

Harshana
Harshana

Reputation: 5476

You can check whether the value variable has a positive value or negative value. Then inside the conditions you can set the values.

var lastpr = 100

function act1() {
  const tds = document.querySelector("table").querySelectorAll("tr")[Math.floor(Math.random() * 3) + 0].querySelectorAll("td");


  tds.forEach((item) => {
    var value = ((Math.floor(Math.random() * 10) - 5) / lastpr) * 100;
    item.innerHTML = value;
    if (value > 0){
      item.style.backgroundColor = "green";
    }else{
      item.style.backgroundColor = "red";
    }
    
  });
}
<div>
  <table class="table1" style="width:100%;font-weight:bold ;font-size:13px;text-align:center; border: 1px solid black;">
    <tr>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3</td>
      <td>3</td>
      <td>3</td>
    </tr>
  </table>
</div>
<button onclick="act1()">change</button>

Upvotes: 2

Prime
Prime

Reputation: 2849

var lastpr = 100

function act1(){
  const tds =document.querySelector("table").querySelectorAll("tr")[Math.floor(Math.random() * 3)+0].querySelectorAll("td");
 
  tds.forEach((item) => {
    const value = ((Math.floor(Math.random() * 10)-5)/lastpr)*100;
    item.innerHTML = value;
    item.style.backgroundColor = value < 0 ? 'red' : 'green'
  });
}
<div>
<table class="table1" style="width:100%;font-weight:bold ;font-size:13px;text-align:center; border: 1px solid black;">
        <tr>
             <td>1</td>
             <td>1</td>
             <td>1</td>
             <td>1</td>
        </tr>
        <tr>
             <td>2</td>
             <td>2</td>
             <td>2</td>
             <td>2</td>
        </tr>
        <tr>
             <td>3</td>
             <td>3</td>
             <td>3</td>
             <td>3</td>
        </tr>           
</table>
</div>
<button onclick="act1()">change</button>

Upvotes: 1

Related Questions