I successfully implemented an active/disable feature in my code that functions flawlessly on both Chrome and Firefox. However, I am encountering an error in IE specifically when using the forEach method.
Upon testing, the following error message appears when using IE: https://i.sstatic.net/GGVV8.png
In contrast, on Chrome and Firefox, the divs highlight the box correctly and display the corresponding box below. https://i.sstatic.net/aN8Mb.png
Below is the snippet of code that I am currently utilizing:
"use strict";
var tabButtons = document.querySelectorAll('.navlinksGP > a');
function enableTabButton(buttonId) {
tabButtons.forEach(function(btn) {
if (btn.id === buttonId) {
btn.disabled = true;
btn.style.background = '#eeaf00';
btn.style.color = '#ffffff';
} else {
btn.disabled = false;
btn.style.background = '#ffffff';
btn.style.color = '#eeaf00';
}
});
}
enableTabButton('word');
var player = document.getElementById('player');
function wButton(element) {
enableTabButton(element);
if (element === "word") {
player.innerHTML = "<h1 id=\"h1update\">Brand & Consumer Marketing</h1>";
}<div class="navlinksGP">
<a id="word" onclick="wButton(this.id); window.location='#container'" href="#">BRAND & CONSUMER MARKETING</a>
</div>The only issue I seem to be facing with IE is that the enableTabButton function does not work as expected.