Проверка значения инпута полученного из php

Question

Есть несколько инпутов получающих свои значения из базы, нужно проверить полученное число и в зависимости от результата окрасить этот инпут либо в красный либо в зеленый цвет Сами инпуты

<?
                  $sql = mysqli_query($link, 'SELECT  `pismo`, `speech`, `lekgram`, `audio`, `reader`, `historya`, `law` FROM `users` WHERE terminal="1"');
                  while ($result = mysqli_fetch_array($sql)) { 
                    echo
                         "<input type='text' class='col-sm-6' value='{$result['pismo']}' readonly><br><br><br>" .
                         "<input type='text' class='col-sm-6' value='{$result['speech']}' readonly><br><br><br>" .
                         "<input type='text'  id='leks' class='col-sm-6' value='{$result['lekgram']}' readonly><br><br><br>" .
                         "<input type='text' class='col-sm-6' value='{$result['reader']}' readonly><br><br><br>" .
                         "<input type='text' class='col-sm-6' value='{$result['audio']}' readonly><br><br><br>" .
                         "<input type='text' class='col-sm-6' value='{$result['historya']}' readonly><br><br><br>" .
                         "<input type='text' class='col-sm-6' value='{$result['law']}' readonly>" ;

                  }
            ?>

Код которым пытался это реализовать

document.addEventListener('DOMContentLoaded', function(){
    if(document.getElementById('leks').value == "<=5") {
    document.getElementById('leks').addClass = "red";
}
        else
        document.getElementById('leks').addClass = "green";
});

ошибок не выдает но и не работает, не могу понять почему

Answer 1

Конструкция:

el.addClass == 'red'

не делает ничего.

Вероятно, вы имели в виду вызов метода:

el.addClass('red')

И, скорее всего:

if (el.value == "<=5")

не то, что вы имели в виду.

if (el.value <= 5)

id элементов на странице должен быть уникальным, поменяйте его на class

<input type='text' class='leks col-sm-6'...

и в js что-то вроде:

for(const el of document.querySelectorAll('leks')) {
  el.classList.add(el.value <= 5 ? 'red' : 'green');
}

Answer 2

document.getElementById('leks').addClass == "red";

вы сравниваете, а не присваиваете, кроме того это функция (addClass('red'))

if(document.getElementById('leks').value == "<=5")

а это что? вам надо сравнить с тем больше число 5 или нет? тогда это делается по другому

if(parseInt(document.getElementById('leks').value) < 5)

P.S.

ну и более-менее принципиальный вопрос - зачем вам вообще Javascript, когда вам php хватит за глаза

силами php сравните значения и выставите нужный класс, чаще всего это лучше, чем генерировать лишний код

БЛОГ НА HUSL

Проверка значения инпута полученного из php

Ответы (2 шт):