javascript - Color based on value of innerHTML

Question

I'm new to web dev and need help. How do I change the color based on the value?

<mat-accordion fxLayout="column" fxLayoutAlign="space-around center" fxLayoutGap="20px" >
      <mat-expansion-panel class="mat-elevation-z3" *ngFor="let resultSkill of ReportData; let l=index" >
        <mat-expansion-panel-header class="description"  [attr.data-target]="'#happy'+l" >
          <mat-panel-title>
            {{resultSkill.ip_title}}
          </mat-panel-title>
          <span class="button-align2" [innerHTML]="resultSkill.range1"></span>
        </mat-expansion-panel-header>
        <mat-panel-description id="happy{{l}}" class="collapse">
        </mat-panel-description>
        <p class="collapse-message"  [innerHTML]="resultSkill.text" style="font-size: 14px;"></p>
        <p class="collapse-message" [innerHTML]="resultSkill.result" style="font-size: 14px;"></p>
        <p class="collapse-message" style="text-align: center; color: #006fd2"><b>How to overcome this?</b></p>
        <p class="collapse-message" [innerHTML]="resultSkill.tips" style="font-size: 14px;"></p>
        <hr class="style5">
      </mat-expansion-panel>
      <br/>
    </mat-accordion>

CSS:
.button-align2{
    float: right;
    margin-right: 0;
    font-size: 16px;
  }

Snapshot of how should it look

question from:https://stackoverflow.com/questions/65832428/color-based-on-value-of-innerhtml

Answer 1

You'd need a simple JS script inside there. Check out the snippet below or https://codepen.io/ma-henderson/pen/OJRGEqq

const low_color = 'red';
const mid_color = 'yellow';
const high_color = 'green';


const buttons = document.querySelectorAll(".button2")
for (let i = 0; i < buttons.length; i++) {
    if (buttons[i].dataset.skill == 'range1') {
        buttons[i].style.backgroundColor = high_color;
    } else if (buttons[i].dataset.skill == 'range2') {
        buttons[i].style.backgroundColor = mid_color;
    } else {
        buttons[i].style.backgroundColor = low_color;
    }
}

.button2{
    margin-right: 0;
    font-size: 16px;
    display: inline-block;
    width: 100px;
    text-align: center;
}

<span class="button2" data-skill="range2">Some Text</span>