как я могу изменить цвет текста в теге в зависимости от значения

Question

Я использую технологию ajax, я хочу отправлять значения в тег div, но в зависимости от значений, которые есть в таблице. Я думаю, что цикл необходим здесь, но как это сделать правильно?

Я использую xampp. бэкэнд php.

index.php

<li class="nav-item">
    <a href="#" class="btn btn-info" role="button" 
    onclick="taskphp()">Tapşırıqlar</a>
</li>

javascript.js

function taskphp() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("body").innerHTML = this.responseText;
            let state = document.getElementById("state");
            let stateValue = document.getElementById("state").innerHTML;
            switch(stateValue) {
                case "duzelib":
                state.style.color = "green";
                break;
                case "duzelme prosesinde":
                state.style.color = "yellow";
                break;
                case "duzelmeyib":
                state.style.color = "red";
                break;
                default:
                state.style.color = "white";
            }
        }
    };
    xhttp.open("GET", "IT/tasks.php", true);
    xhttp.send();
}

tasks.php

<?php while($row = $result->fetch_assoc()) {
    echo  "<tbody><tr>";
    echo "<td>".$row["task"]."</td>";
    echo "<td>".$row["description"]."</td>";
    echo "<td>".$row["task_objects"]."</td>";
    echo "<td id=\"state\">".$row["state"]."</td>";
    echo "<td>".$row["entrance_date"]."</td>";
    echo "<td>".$row["execute_date"]."</td>";
    echo "<td>".$row["source"]."</td>";
    echo "<td>".$row["month"]."</td>";
    echo "</tr></tbody>";
}
?>

Я использовал переключатель, мне удалось изменить цвет только первого элемента в списке, и мне нужно изменить цвета всех элементов в зависимости от их значения

Answer 1

Нужно иметь в виду только пару вещей.

Как вы настроили это, вы получите кучу элементов с идентификатором "состояние". Теперь теоретически идентификатор должен быть уникальным для одного элемента HTML. Вот почему у нас есть getElementById, а не getElementsbyId.

Вы знаете, что может быть общим для нескольких элементов? Классы! Итак, первое, что вы хотите сделать, это изменить свой php так, чтобы

echo "<td id=\"state\">".$row["state"]."</td>";

становится

echo "<td class=\"state\">".$row["state"]."</td>";

Так что теперь все элементы типа 'state' могут быть получены в виде массива с помощью getElementsByClassName. Затем вы можете перебрать этот массив, а затем запустить оператор switch для каждого элемента 'state' по отдельности:

const states = document.getElementsByClassName("state");
for (const state of states) {
    const stateValue = state.innerHTML;
    switch(stateValue) {
        case "duzelib":
            state.style.color = "green";
            break;
        case "duzelme prosesinde":
            state.style.color = "yellow";
            break;
        case "duzelmeyib":
            state.style.color = "red";
            break;
        default:
            state.style.color = "white";
      }
}