It appears that Internet Explorer (versions 9 to Edge) is blocking a specific part of my JavaScript code. While I can adjust security settings to show the desired effect, it's not practical to ask users to do the same. There seems to be an issue with one section of the code, as everything else displays correctly.
$.each(data.results.audio, function(key, val) {
var replace = val.mp3Url.replace('&', '&');
if (val.imgUrl) {
status = "style='background:";
switch (val.roadCondition) {
case "1":
status += "#4CAF50'"; // green
break;
case "2":
status += "#FFEB3B'"; // yellow
break;
case "3":
status += "#D32F2F'"; // red
break
case "4":
status += "black'"; // black
break;
default:
status += "white'"; // white
}
}
var items2 = "<div class='bt_icon z-depth-5 hvr-round-corners'" + status + "><p class='shine waves-effect waves-green hvr-round-corners'><img id='" + key + "' class='majors ' src='" + val.imgUrl + "' alt='" + val.name + "' title='" + val.name + "' data-audio='" + replace + "' /></p></div>";
$("#button_icons").append(items2);
if (first && !isDone) {
isDone = true;
var audio = document.querySelector("audio");
audio.src = replace;
audio.load();
}
items.push(items2);
});
NOTE: background-color has similar effects as well.
The remaining part of the code functions properly except for the assignment of the "status" variable. Chrome, Firefox, and Safari all display the content correctly. However, in Internet Explorer, it seems that the "status" code mentioned above never gets inserted. It doesn't appear in the DOM when using dev tools. The only solution seems to be lowering security settings to medium and reloading the page. Are there any explanations or fixes available?