Su selector está tratando de encontrar una etiqueta con una identificación igual a "aht", no de clase "aht". value no es una propiedad para encontrar texto para el valor de la tabla, porque este es un elemento td , no un elemento de entrada , debe usar la propiedad innerText. Puedes probar innerText o textContent

 console.log(document.querySelector('.aht').innerText)

Tenga en cuenta que esto solo está tratando de obtener el valor de texto del primer elemento td .

Lo que está tratando de hacer puede lograrse mediante un operador ternario en la plantilla de Django. Esto es como un si, pero más corto.

 <style> .bg-green { background-color: green; } .bg-red { background-color: red; } </style> {% for item in data %} <tr> <td class="text-center align-middle">{{ item.loginid }}</td> <td class="text-center align-middle">{{ item.agentname }}</td> <td class="text-center align-middle">{{ item.team }}</td> <td class="text-center align-middle">{{ item.queue_name }}</td> <td class="text-center align-middle">{{ item.sumduration}}</td> <td class="text-center align-middle">{{ item.countduration}}</td> <td class='text-center align-middle aht {{ item.aht <= item.agent_target |yesno:"bg-green,bg-red,bg-none" }}' >{{ item.aht}}</td> <td class="text-center align-middle target">{{ item.agent_target}}</td> </tr> {% endfor %}

¡Prueba el código y avísame si funcionó! *Si cree que mi solución respondió a su pregunta, acepte esta respuesta, ¡muchas gracias! *

Referencias: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText https://docs.djangoproject.com/en/4.1/ref/templates/builtins/#yesno

No javascript

En realidad puedes hacer esto sin javascript

en tu CSS

 .over_target{ background-color:"red" /* or use #ff0000 style */ } .on_target { background-color: "green" }

luego reemplace su línea td aht actual con

 <td class="text-center align-middle {% if item.aht > item.agent_target %} over_target {% else %} under_target {% endif %} ">{{ item.aht}}</td>

javascript

Si realmente quieres usar javascript, se vuelve un poco más complicado.

Has añadido 'aht' como clase. Desea identificar de forma única cada celda, por lo que necesitará una identificación en su lugar. Para usar 'aht' como identificación, usaría;

 <td class="text-center align-middle" id="aht">{{ item.aht}}</td>

Sin embargo, está utilizando un forloop para recorrer una lista, cada una de las cuales querrá tener una identificación única, porque de lo contrario, otras filas tendrán una celda con la misma identificación. Para sortear eso, podemos tomar un número del django {{forloop.counter}}

 <td class="text-center align-middle" id="aht{{forloop.counter}}">{{ item.aht}}</td>

Utilice el mismo formato para la columna de destino

Luego, para establecer el color de la columna de destino, puede usar algo como esto (después del código de la tabla):

 <script> function getColour(aht, target) { if (aht > target) { return "red"} return "green" } {% for item in data %} aht = document.getElementById('aht{{forloop.counter}}).innerText target= document.getElementById('target{{forloop.counter}}).innerText targetColour = getColour(aht, target) document.getElementById('aht{{forloop.counter}}').style.backgroundColor = targetColour {%endfor%} </script>

Su selector para aht col está tratando de encontrar una ID, pero solo está usando clases, puede intentar agregar la ID al elemento o elegir el primer elemento con esa clase usando

document.querySelector('.aht')