Change background color at runtime

Question

I would like to be able to change the color of a gridbox at runtime based on the text in the box. I have a JS function called checkColor(str) which will return a color but I can't figure out the correct syntax to get it to work.

<div class="grid-item" style="background-color:checkColor(Swim)">    
    {{bunk.activities[_-1]}}
</div>


<script>
function checkColor(s){
    if (s == "Swim"){
        return 'red'
    }
}

</script>

score 1 · Accepted Answer · answered Jan 05 '20 at 08:28

1

There is no CSS syntax for calling a JavaScript function. You need to approach this from the JavaScript end.

Possibly you should set up a DOM Ready event listener which will get all the divs you care about and then loop over them accessing their style properties to set the colour you want. Since you would need to get "Swim" from somewhere you might want to use a data attribute.

That said, it would probably better to just forget about JS entirely for this and use a class instead.

class="grid-item swim">

and

.grid-item.swim { background-color: red; }

answered Jan 05 '20 at 08:28

Quentin

800,325
104
1,079
1,205

What happens if you have hundreds of different names? You could accidentally apply a css to the element if you have the class name in use – Stefan Avramovic Jan 05 '20 at 08:45
@StefanAvramovic — Prefix the class name with something descriptive that won't clash. `activity_swim` for example. – Quentin Jan 05 '20 at 08:49
@StefanAvramovic — Because (a) HTML is a *semantic* language and you should expressing presentation where possible and (b) the question implies that, at the point of generating the HTML, the data available is "swim" and not "red" – Quentin Jan 05 '20 at 08:55

score 0 · Answer 2 · answered Jan 05 '20 at 08:28

Well, you can not add js function in style attribute! Instead, you need to change the background using JavaScript & CSS:

var element = document.getElementById("item_1");
element.classList.add("swim");

.swim{
   background-color: red;
}

<div id="item_1" class="grid-item">    
    Hello World
</div>

Above we injected a class name 'swim' that has a style of red background.

Stefan Avramovic · Answer 3 · 2020-01-05T08:46:31.033

You can do it this way, if you set the value to check as "data-value". Loop all elements with class grid-item, if "data-value" == Swim apply color.

function checkColor(s,item){
  
    if (s == "Swim"){
        item.style.backgroundColor = "red";
    }
}

var item = document.getElementsByClassName('grid-item')

for (var i in item){
  
  checkColor(item[i].getAttribute('data-value'),item[i])
  
}

  
  <div class="grid-item" data-value="Swim">    
    {{bunk.activities[_-1]}}
</div>

<div class="grid-item" data-value="Swim">    
    {{bunk.activities[_-1]}}
</div>

score -1 · Answer 4 · answered Jan 05 '20 at 08:37

-1

`function checkColor(s){
    if (s == "Swim"){
        return 'red'
    }
 }    
 document.getElementsByClassName('grid-item').style.background = checkColor("Swim");

` This should set "grid-item"'s background to red

answered Jan 05 '20 at 08:37

Von Uyvico

47
7

score -1 · Answer 5 · answered Jan 05 '20 at 08:38

you cant call java script function from CSS rather than that i suggest to you to use java script and make switch with all colors and item names.

function checkColor(){
   var elements = document.getElementsByClassName();
   for(var x = 0;x < elements.length;x++){
        switch(elements[x].innerHtml){
           case 'swim':{
              elements[x].style.background = 'red';
              break;
            }
            .
            .
            .
            .
        }
   }
}

Change background color at runtime

5 Answers5