Javascript can not change CSS color

Question

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.

This code looks very messy! sure, you are a beginner. But, you may want to rewrite the whole thing in jQuery. — lshettyl
– lshettyl, Commented Mar 14, 2015 at 20:17

Quentin · Accepted Answer · 2015-03-14 20:18:47Z

4

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.

answered Mar 14, 2015 at 20:18

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hashem Qolami · Accepted Answer · 2015-03-14 20:22:56Z

-2

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";
}

edited Mar 14, 2015 at 20:22

Hashem Qolami

99.8k27 gold badges157 silver badges165 bronze badges

answered Mar 14, 2015 at 20:09

Ren P

9279 silver badges21 bronze badges

2 Comments

shane200195 Over a year ago

I have already tried it, and it doesn't change anything, also on W3C it showed p as in capital letters.

Quentin Over a year ago

HTML tag names are case insensitive

Collectives™ on Stack Overflow

Javascript can not change CSS color

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related