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

/

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/gFN6r/501/

• javascript
• css
• switch-statement
• background-color

• You should not use same id on multiple elements, it is not valid. Use different id's. – pisamce Commented Jun 4, 2015 at 12:11
• As I can see on your jsfiddle you have spaces in your html code in div elements, so just trim your colorInput. – Анатолий Ивашов Commented Jun 4, 2015 at 12:12
• id has to be unique. – Newinjava Commented Jun 4, 2015 at 12:15
• Can you use jQuery? Or mootools is necessity? – Анатолий Ивашов Commented Jun 4, 2015 at 12:18
• The unique ID is my problem. It has to be the same ID. Otherwise I could swap the color by CSS only. – Maximilian Dahl Commented Jun 4, 2015 at 12:22

4 Answers 4

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/gFN6r/505/

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/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;
    }
});

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.

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