получить элемент по идентификатору и изменить стиль

Question

У меня есть JQuery, который работает нормально, он захватывает пользовательский ввод, выполняет вычисления, а затем выплевывает результат. Мне нужна некоторая помощь при использовании getElementByID для сравнения двух результатов из JQuery, который выплеван в элементы ID, и, если один результат меньше, чем второй результат, измените elementByID на цвет, например красный.

если плановые расходы (общие) меньше, чем totalTP (поле, не облагаемое налогом), тогда измените цвет

См. JSFiddle моей попытки

https://jsfiddle.net/p3smeb4u/2/

$(document).ready(function() {
  // this will run on every select value change. if you want it to only run for those specific selects, add the same class in all of them and change the selector to $('select.yourclass')
  $('select').on('change', function() {

     total = Number($('.first').val()) + Number($('.second').val()) + Number($('.third').val())

     var calc = total / 19 * 100;

     var newNum = calc.toFixed(2);

   $('#total').text('£' + newNum);



  });

});



$(document).ready(function() {
$("#qty").keyup(function(){
   totalTP = $("#qty").val()* $("#price").val() / 100;
   $("#totalTP").val(totalTP);

   var myElement = document.getElementById("totalTP");
var myElement2 = document.getElementById("total");

function colorChange() {
  if (myElement2.innerHTML < myElement.innerHTML) {

    total.style.color = 'red';
  } else {
    total.style.color = 'green';
  }
}

});

});

Answer 1

По сути, как упоминал Том, поскольку вы уже используете JQuery, воспользуйтесь этим, используя метод .css, подобный следующему:

const getNewNum = () => {
  const total =
    Number($(".first").val()) +
    Number($(".second").val()) +
    Number($(".third").val());

  const calc = (total / 19) * 100;
  return calc.toFixed(2);
};

$(document).ready(function() {
  $("select").on("change", function() {
    const newNum = getNewNum();
    $("#total").text("£" + newNum);
  });

  $("#qty").keyup(function() {
    const totalTP = ($("#qty").val() * $("#price").val()) / 100;

    $("#totalTP").val(totalTP);

    const newNum = getNewNum();

    const color = parseFloat(newNum) > totalTP ? "red" : "green"
    $("#total").css("color", color);
  });
});

, вот пример, работающий правильно:

https://jsfiddle.net/xozLyef4/1/

надеюсь, что это поможет:)

Answer 2

Попробуйте, дорогой, вы можете использовать метод "css" jquery для обработки стиля.

  $('#total').text('£' + newNum);

  // Just add this code snippet
  var totalTp = $("#totalTP").val();
  if(parseInt(newNum) < parseInt(totalTp)){
     $("#total").css("color", "green");
  }else{
     $("#total").css("color", "red");
  }