CODEWITHSUNDEEP
javascriptjqueryhtmlcss
shane200195
shane200195

Reputation: 23

Javascript can not change CSS color

Hi I am new to Javascript and I just wanted to make a virtual stock simulator. I just finished the main stocks, I just thought it would be cool that when the price went up the price the price would turn green, and when the price went down the price would turn red, this where I ran into my problems, the code would not run and the text would not even show. The code is below. 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;
        }
    }
}
})();

And please don't laugh at how bad it is, as I said I am very new to programming overall.

Upvotes: 2

Views: 73

Answers (2)

Ren P
Ren P

Reputation: 927

Can you try this? You had "P" in capital letters, and the p element is lowercase.

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

Upvotes: -2

Quentin
Quentin

Reputation: 943569

getElementsByTagName (note the plural of Elements) returns an HTML Collection (which is an array-like object), not a single HTML element.

You can't set its style, you have to loop over it and set the style of each HTML element inside it.

Upvotes: 4

Related Questions