CSS and if condition in javascript

Question

if(smaxResult<sigma){
    document.getElementById('smaxResult').innerHTML = "Max strain is: " + smaxResult + "<σ(επ)  text1";
} else{
    document.getElementById('smaxResult').innerHTML = "Max strain is: " + smaxResult + ">σ(επ)  text2";
}

Hello! i have this condition, and I want when the (smaxResult < sigma) occurs the <σ(επ) text1 to turn out green or else the >σ(επ) text2 to turn out red (I mean the color of the font).

Any advise? thank you.

Where did you get stuck? What's going wrong in your code? How, and when, are you retrieving the smaxResult, what's sigma? Do you have any HTML that might be relevant to this problem? — David Thomas
– David Thomas, Commented Oct 28, 2016 at 22:25

Zakaria Acharki · Accepted Answer · 2016-10-28 22:58:42Z

1

Create two classes red and green and wrap the text you want to colorize by span then add class to this span according to the condition :

var elem = document.getElementById('smaxResult');

if(smaxResult<sigma){
    elem.innerHTML = "Max strain is: " + smaxResult + "<σ(επ)  text1";
    elem.classList.add("green");
} else{
    elem.innerHTML = "Max strain is: " + smaxResult + ">σ(επ)  text2";
    elem.classList.add("red");
}

CSS :

.red{
    color: red;
}

.green{
    color: green;
}

Hope this helps.

var elem = document.getElementById('smaxResult');

var elem = document.getElementById('smaxResult');
var smaxResult = 5;
var sigma = 20;

if(smaxResult<sigma){
  elem.innerHTML = "Max strain is: " + smaxResult + " <span><σ(επ)  text1</span>";
  elem.querySelector('span').classList.add("green");
} else{
  elem.innerHTML = "Max strain is: " + smaxResult + " <span>>σ(επ)  text2</span>";
  elem.querySelector('span').classList.add("red");
}

.red{
    color: red;
}

.green{
    color: green;
}

<span id="smaxResult">Some text for test</span>

edited Oct 28, 2016 at 22:58

answered Oct 28, 2016 at 22:27

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

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

5 Comments

Zahos Gk Over a year ago

Thank you sir! it helped but i wanted as you can see in this photo: i.imgur.com/oJQ3bCz.png to be green only the text in the red cycle. But that's ok, Thank you very much.

NikxDa Over a year ago

What if one of the classes has already been applied and the function runs again in other circumstances? You should check for that.

Zakaria Acharki Over a year ago

Thanks for your intervention @NikxDa .. if so we could remove all the classe first using elem.querySelector('span').className = ""; or just remove the specific one using elem.querySelector('span').classList.remove(className).

NikxDa Over a year ago

Removing all the classes will not work because the element might have other classes. Check if the classList contains one of the elements, if so, remove it. I'd wrap this behaviour in a sub-function.

Stephen P Over a year ago

@ZahosGk - really, seriously, do not name your classes "red" and "green". Name your classes for what things are or what they represent, not for how they look. If (result < sigma) represents being within tolerance and therefore a good result, for example, you could tag that span as <span class="goodresult"> and otherwise have <span class="badresult"> -- this gives it meaning (semantic) -- the decision to make "good" be green and "bad" be red is a stylistic decision that should be confined to the CSS, not part of the class name in the markup.

Community · Accepted Answer · 2017-05-23 12:33:21Z

0

Referring to this comment: CSS and if condition in javascript

With the accepted answer, you will also need to check whether one of the classes is already set on the element, and if it is, remove it. For this, use the following function:

function applyClass (el, name, classes) {
    for (var i = 0; i < classes.length; i++) 
        if (el.classList.contains (classes [i])) 
            el.classList.remove (classes [i]);

    el.classList.add (name);
}

Call it like this:

applyClass (document.querySelector ("span"), "red", ["red", "green"]);

This function can be used for any amount of possible classes and helps to prevent unwanted behaviour if some classes are applied multiple times.

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered Oct 28, 2016 at 23:50

NikxDa

4,1951 gold badge30 silver badges49 bronze badges

Collectives™ on Stack Overflow

CSS and if condition in javascript

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related