Я пишу с переводом! У меня есть скрипт JS, который рассчитывает два числа.

number_one - number_two; Все работает, но я хочу, чтобы результат был красочным;

Вы можете помочь мне сделать это?

 1. If the result is plus ( a-b = c )( 4-2 = 2 ) = color green; 
 2. If the number is negative ( a-b = -c ) ( 2-4 = -2 ) = red color; 
function myFunction() {
  var a = document.getElementById('number_one').value;
  var b = document.getElementById('number_two').value;
  var rezultat = parseInt(a) - parseInt(b);
  document.getElementById('summa').innerHTML = rezultat;
}
<div> <input type="text" id="number_one"> </div>
<div> <input type="text" id="number_two"> </div>
<div class="test">
  <button onclick="myFunction()">Click me</button>
  <p id="summa"></p>
</div>
0
Sergiu121 27 Апр 2020 в 17:42

2 ответа

Лучший ответ

Вы можете использовать style.color, чтобы установить цвет элемента как

  if(rezultat > 0){
   document.getElementById('summa').style.color = "green";
   }else{
   document.getElementById('summa').style.color = "red";
   }
function myFunction() {
  var a = document.getElementById('number_one').value;
  var b = document.getElementById('number_two').value;
  var rezultat = parseInt(a) - parseInt(b);
  document.getElementById('summa').innerHTML = rezultat;
  if(rezultat > 0){
   document.getElementById('summa').style.color = "green";
   }else{
   document.getElementById('summa').style.color = "red";
   }
}
<div> <input type="text" id="number_one"> </div>
<div> <input type="text" id="number_two"> </div>
<div class="test">
  <button onclick="myFunction()">Click me</button>
  <p id="summa"></p>
</div>
1
Hien Nguyen 27 Апр 2020 в 14:49

Так как вы хотите иметь красный для отрицательного и зеленый для положительного, я обновляю свой ответ, как показано ниже. Просто измените последнюю строку, как показано ниже

 var requiredElement=document.getElementById('summa').innerHTML;

requiredElement.innerHTML=rezultat;

requiredElement.style.color=rezultat>0?'green':'red';
0
Vishal Chaturvedi 27 Апр 2020 в 14:56