Javascript/JQuery/AJAX Else If not working

Question

First off, I am a beginner. I am trying to find a solution to my problem. Basically I want my text to be a different color based on a number so I used a ELSE IF statement. It works, but it doesn't and I tried 2 different ways. I used an API for the basic display of the numbers (temperatures from sensors)

See JFiddle for examples it also displays the rest of the code displaying the number.

http://jsfiddle.net/1brkww9h/98/

if (templr < 60) {
$("#displaylr").css("color", "#0000ff");
}
    else    if (templr < 70 && templr > 69) {
$("#displaylr").css("color", "#FFED00");
} else if (templr < 69 && templr > 68) {
    $("#displaylr").css("color", "#FFFC00");
} else if (templr < 68 && templr > 67) {
    $("#displaylr").css("color", "#EBEE12");
} else if (templr < 67 && templr > 66) {
    $("#displaylr").css("color", "#CFD42C");
} else if (templr < 66 && templr > 65) {
    $("#displaylr").css("color", "#ABB24A");
} else if (templr < 65 && templr > 64) {
    $("#displaylr").css("color", "#858C6C");
} else if (templr < 64 && templr > 63) {
    $("#displaylr").css("color", "#3D41AF");
} else if (templr < 63 && templr > 62) {
    $("#displaylr").css("color", "#0000FD");
} else if (templr < 62 && templr > 61) {
    $("#displaylr").css("color", "#424DFF");
} else {
    $("#displaylr").css("color", "#dddddd");

}

http://jsfiddle.net/1brkww9h/99/

if (templr < 1) {
   $("#displaylr").css("color", "#000000");
}
else if (templr = 69) {
  $("#displaylr").css("color", "#FFED00");
}
else if (templr = 68) {
  $("#displaylr").css("color", "#FFFC00");
}
else if (templr = 67) {
  $("#displaylr").css("color", "#EBEE12");
}
else if (templr = 66) {
  $("#displaylr").css("color", "#CFD42C");
}
else if (templr = 65) {
  $("#displaylr").css("color", "#ABB24A");
}
else if (templr = 64) {
  $("#displaylr").css("color", "#858C6C");
}
else if (templr = 63) {
  $("#displaylr").css("color", "#3D41AF");
}
else if (templr = 62) {
  $("#displaylr").css("color", "#0000FD");
}
else if (templr = 61) {
  $("#displaylr").css("color", "#424DFF");
}
else {
  $("#displaylr").css("color", "#dddddd");

}

You wrote "It works, but it doesn't". Sorry, what is it that you want to appear? What is appearing that you don't want to appear? — Kirby, Jan 21 '16 at 18:35
Please use [Switch](http://www.w3schools.com/js/js_switch.asp) Statement. — Zakaria Acharki, Jan 21 '16 at 18:37
@Kirby It's changing the color, but it's not changing it based on the number... — Jaker, Jan 21 '16 at 19:11
@ZakariaAcharki How do I use the switch statement with else ifs? — Jaker, Jan 21 '16 at 19:11
http://stackoverflow.com/questions/5464362/javascript-using-a-condition-in-switch-case/9055603#9055603 — Zakaria Acharki, Jan 21 '16 at 19:32
@ZakariaAcharki Now nothing displays using CASE. http://jsfiddle.net/1brkww9h/104/ — Jaker, Jan 21 '16 at 20:39

gre_gor · Accepted Answer · 2016-01-29T17:57:52.480

Your templr variable is a jQuery object and not a number.

jObject.text(var) would return jObject and jObject.text() would return text inside jObject.

You need to change your code

var templr = $("#displaylr").text(((retval.d.temp_degC * 1.8) + 32).toFixed(1));

to

var templr = (retval.d.temp_degC * 1.8) + 32;
$("#displaylr").text(templr.toFixed(1));

Also your conditions in if statements newer match whole numbers, only in between.

Numbers 65 and 64 will get #dddddd, but numbers 64.1 to 64.9 will get #858C6C.

If you just want a blue-yellow gradient between 60 and 70, you can use this function

function get_color(num, min_val, min_color, max_val, max_color)
{
    if (num <= min_val)
        return "rgb("+min_color.join(",")+")";
    if (num >= max_val)
        return "rgb("+max_color.join(",")+")";
    var t = (num-min_val)/(max_val-min_val);
    var color = [0,0,0];
    for (var j=0; j<3; j++)
        color[j] = Math.floor(min_color[j]*(1-t) + max_color[j]*t);
    return "rgb("+color.join(",")+")";
}

and then you can replace all the if statements with

$("#displaylr").css("color", get_color(templr, 60, [0x00,0x00,0xFF], 70, [0xFF,0xFF,0x00]));

AWESOME! I tweaked a few things, but this is exactly what I needed. @gre_gor — Jaker, Jan 22 '16 at 00:39
What if I wanted a gradient like this? http://jakerieskamp.com/mobile/colormap.html @gre_gor — Jaker, Jan 22 '16 at 00:49

Javascript/JQuery/AJAX Else If not working

1 Answers1