Javascript не может изменить цвет CSS

Question

Привет Я новичок в Javascript, и я просто хотел создать виртуальный симулятор акций. Я только что закончил основные акции, я просто подумал, что было бы здорово, что когда цена подорожала, цена станет зеленой, а когда цена снизится, цена станет красной, это, когда я столкнулся с моими проблемами, код не будет работать, и текст даже не будет показан. Код ниже. The full code including HTML and CSS iS on JSfiddle (only the Javascript part is below, and the color changing parts are currently commented out , but you can just uncomment it on JSfiddle.

(function() { 
var Stock1 = document.getElementById("RBC"); 
var Stock2 = document.getElementById("TeslaM"); 
var Stock3 = document.getElementById("SpaceX"); 
var submitDay = document.getElementById("submitDay"); 
var AmountOf = document.getElementById("AmountOf"); 
Stock1.addEventListener("click", RBC, false); 
Stock2.addEventListener("click", TeslaM, false); 
Stock3.addEventListener("click", SpaceX, false); 
submitDay.addEventListener("click", Days, false); 

function Days() { 
    days = document.getElementById("days").value; 
} 

function RBC() { 
    $("div").empty(); 
    var Investments = 100000; 
    for (day = 1; day <= days; day++) { 
     var difference = (Math.random() * (1.05 - 0.95) + 0.95); 
     var Investments = (Investments * difference).toFixed(2); 
     $("div").append("<p>" + day + ". " + "Your money today " + Investments + "</p>"); 
     /*if (difference < 1) { 
      document.getElementsByTagName("P").style.color = "red"; 
     } else { 
      document.getElementsByTagName("P").style.color = "green"; 
     }*/ 
     if (day - 1 === days - 1) { 
      AmountOf.innerHTML = "Amount of money you have: " + "$" + Investments; 
     } 
    } 
} 

function TeslaM() { 
    $("div").empty(); 
    var Investments = 100000; 
    for (day = 1; day <= days; day++) { 
     var difference = (Math.random() * (1.2 - 0.8) + 0.8); 
     var Investments = (Investments * difference).toFixed(2); 
     $("div").append("<p>" + day + ". " + "Your money today " + Investments + "</p>"); 
     /*if (difference < 1) { 
      document.getElementsByTagName("P").style.color = "red"; 
     } else { 
      document.getElementsByTagName("P").style.color = "green"; 
     }*/ 
     if (day - 1 === days - 1) { 
      AmountOf.innerHTML = "Amount of money you have: " + "$" + Investments; 
     } 

    } 
} 

function SpaceX() { 
    $("div").empty(); 
    var Investments = 100000; 
    for (day = 1; day <= days; day++) { 
     var difference = (Math.random() * (1.4 - 0.6) + 0.6); 
     var Investments = (Investments * difference).toFixed(2); 
     $("div").append("<p>" + day + ". " + "Your money today " + Investments + "</p>"); 
     /*if (difference < 1) { 
      document.getElementsByTagName("P").style.color = "red"; 
     } else { 
      document.getElementsByTagName("P").style.color = "green"; 
     }*/ 
     if (day - 1 === days - 1) { 
      AmountOf.innerHTML = "Amount of money you have: " + "$" + Investments; 
     } 
    } 
} 
})(); 

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

Answer 1

getElementsByTagName (обратите внимание на множественное число элементов) возвращает коллекцию HTML (который представляет собой массив-подобный объект), ни одного HTML элемента.

Вы не можете установить его style, вам нужно его перебрать и установить style каждого элемента HTML внутри него.

Answer 2

Вы можете попробовать это? У вас есть «P» заглавными буквами, а элемент p - строчный.

if (difference < 1) { 
    document.getElementsByTagName("p").style.color = "red"; 
} else { 
    document.getElementsByTagName("p").style.color = "green"; 
}