CODEWITHSUNDEEP
javascriptcssswitch-statementbackground-color
Maximilian Dahl
Maximilian Dahl

Reputation: 105

Swap background-color of a specific div with switch/case

I'm trying to swap the background-color of some specific divs basing on their content.
Their background-color should swap when their input is like "Lifestyle" or "Politics" or "Economy" or "Local" or "Sports" or "News".

var colorInput = document.getElementById('views-field-field-section').textContent;

      switch (colorInput) {
    case 'Lifestyle':
      document.getElementById('views-field-field-section').style.backgroundColor = '#9518b8';                
        break;
    case 'Local':
      document.getElementById('views-field-field-section').style.backgroundColor = '#009fe3';
        break;
    case 'Sports':
      document.getElementById('views-field-field-section').style.backgroundColor = '#95c11f';
        break;
    case 'Economy':
      document.getElementById('views-field-field-section').style.backgroundColor = '#d40d10';
        break;
     case: 'Politics':
       document.getElementById('views-field-field-section').style.backgroundColor = '#ffcc00';
        break;
    default:

        break;
  }

http://jsfiddle.net/gFN6r/501/

Upvotes: 3

Views: 2635

Answers (4)

Joshua joseph bissot
Joshua joseph bissot

Reputation: 46

Enumerate use abs 1 -1 =0 -1 = -1(abs) gets you back to 1 so if you start with $case=1 and just -1 as an absolute value you will tick tock between 1 & 0 either way you always subtract 1

Upvotes: 0

Анатолий Ивашов
Анатолий Ивашов

Reputation: 238

Oh man. Don't use the same id :) But if it is necessary, ok...

I adjusted a little bit your source code, e.g. there was some syntax error, and added jQuery, hope it's not a problem :)

  1. If you use the same id, this will not work - $('#myid'), but this will - $('[id=myid]')

  2. Don't forget to use trim-like function to remove trailing spaces.

  3. And please think a little about how to avoid the same id in your code.

http://jsfiddle.net/gFN6r/506/

$('[id=views-field-field-section]').each(function() {
    var text = $(this).text();
    text = $.trim(text);

    switch (text) {
        case 'Lifestyle':
            $(this).css({backgroundColor: '#9518b8'});
            break;
        case 'Local':
            $(this).css({backgroundColor: '#009fe3'});
            break;
        case 'Sports':
            $(this).css({backgroundColor: '#95c11f'});
            break;
        case 'Economy':
            $(this).css({backgroundColor: '#d40d10'});
            break;
         case 'Politics':
             $(this).css({backgroundColor: '#ffcc00'});
            break;
        default:
            $(this).text('Nix!');
            break;
    }
});

Upvotes: 4

hamecoded
hamecoded

Reputation: 1121

Here you have it using jQuery to simplify plunker. The id is set on the containing parent, while you need to iterate over the children and to check for their content. Note that I've used .trim() to eliminate start and trailing spaces so the match case would catch.

Upvotes: 0

Arathi Sreekumar
Arathi Sreekumar

Reputation: 2584

You cannot use ids more than once in an html document. This would be invalid html. I have changed the id to a class, and then used the following code and it works:

var colorInput = document.getElementsByClassName('views-field-field-section');
for(i=0; i<colorInput.length; i++) {
      var colorInputText = colorInput[i].textContent.trim();
      switch (colorInputText) {
        case 'Lifestyle':
                colorInput[i].style.backgroundColor = '#9518b8';                
                break;
        case 'Local':
                colorInput[i].style.backgroundColor = '#009fe3';
                break;
        case 'Sports':
                colorInput[i].style.backgroundColor = '#95c11f';
                break;
        case 'Economy':
                colorInput[i].style.backgroundColor = '#d40d10';
                break;
        case 'Politics':
                colorInput[i].style.backgroundColor = '#ffcc00';
                break;
        default:
                text ='Nix!'; 
  }
}

Here is the jsfiddle: http://jsfiddle.net/gFN6r/505/

Upvotes: 6

Related Questions