I am trying to creat a color-legend, showing which color means which expresssion (String) therefore i created a switch going through all the possible Strings and returning the assigned color. This works fine in all browsers except IE and Edge.
In IE and Edge the Problem is that every element of the list ends up in the default-case of the switch and therefor gets background-color:white
, so it appears to me that something in the String comparison of the switch goes wrong, but i don't understand what exactly that is and how i can fix it.
Hopefully someone of you guys can help me. Thanks in advance and greetings :)
.my-legend .legend-title {
content: " ";
position: relative;
top: 6px;
left: 0;
display: block;
width: 100%;
height: 28px;
border: 2px solid #666;
border-radius: 10px;
background: #666;
z-index: -1;
text-align: center;
color: #fff;
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
}
.my-legend .legend-scale ul {
margin: 0;
margin-bottom: 5px;
padding: 0;
float: left;
list-style: none;
/*Use this Property to stetch height of legend and diagram*/
padding-bottom: 200px;
}
.my-legend .legend-scale ul li {
color: #666;
font-size: 100%;
list-style: none;
margin-left: 0;
line-height: 18px;
margin-top: 5px;
}
.my-legend ul.legend-labels li span {
display: block;
float: left;
height: 20px;
width: 20px;
margin-right: 5px;
margin-left: 0;
border: 1px solid #999;
border-radius: 10px;
filter: none;
}
.my-legend .legend-scale{
margin: 0px 25px;
}
<div class="my-legend"> <!--class = "dropdown"-->
<div class='legend-title'>Legend</div> <!-- class="headline2"-->
<div class="legend-scale"> <!--id="legend" -->
<ul class="legend-labels">
<li><span></span>9th grade of compulsory school</li>
<li><span></span>Not in education or training</li>
<li><span></span>Intermediate solutions</li>
<li><span></span>Vocational education and training upper secondary</li>
<li><span></span>General education upper secondary</li>
<li><span></span>Economically active with upper sec. diploma</li>
<li><span></span>Economically active without upper sec. diploma</li>
<li><span></span>Neither economically active nor in education or training</li>
<li><span></span>Tertiary A = Universities and Universities of Applied Sciences</li>
<li><span></span>Tertiary B = other postsecondary education and training</li>
</ul>
</div>
</div>
<script>
//define each color
var school = "#666";
var coational_education = "#6CA";
var general_education = "#088";
var intermediate = "#F68";
var not_in_education = "#F18";
var tertiary_a = "#909";
var tertiary_b = "#DBD";
var no_edu_no_emp = "#DDD";
var work_no_dipl = "#AAA";
var work_dipl = "#888";
var notsure = "#FF0";
var list = document.getElementsByClassName("legend-labels");
for (var x = 0; x<list[0].children.length; x++)
{
switch(list[0].children[x].innerText)
{
case "9th grade of compulsory school":
list[0].children[x].firstChild.style.background = school;
break;
case "Not in education or training":
list[0].children[x].firstChild.style.background = not_in_education;
break;
case "Intermediate solutions":
list[0].children[x].firstChild.style.background = intermediate;
break;
case "Vocational education and training upper secondary":
list[0].children[x].firstChild.style.background = coational_education;
break;
case "General education upper secondary":
list[0].children[x].firstChild.style.background = general_education;
break;
case "Economically active with upper sec. diploma":
list[0].children[x].firstChild.style.background = work_dipl;
break;
case "Economically active without upper sec. diploma":
list[0].children[x].firstChild.style.background = work_no_dipl;
break;
case "Neither economically active nor in education or training":
list[0].children[x].firstChild.style.background = no_edu_no_emp;
break;
case "Tertiary A = Universities and Universities of Applied Sciences":
list[0].children[x].firstChild.style.background = tertiary_a;
break;
case "Tertiary B = other postsecondary education and training":
list[0].children[x].firstChild.style.background = tertiary_b;
break;
default:
list[0].children[x].firstChild.style.background = "white";
}
}
</script>