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/
Share Improve this question edited May 19, 2016 at 17:45 user6339740 asked Jun 4, 2015 at 12:03 Maximilian DahlMaximilian Dahl 1051 silver badge9 bronze badges 9- 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
yourcolorInput
. – Анатолий Ивашов 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
Reset to default 6You 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 :)
If you use the same
id
, this will not work -$('#myid')
, but this will -$('[id=myid]')
Don't forget to use
trim
-like function to remove trailing spaces.- 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