javascriptinternet-explorer-11getelementsbyname

IE 11: Object doesn't support property or method 'getElementsByClassName'

This is not a duplicate. Previous questions relate to IE8. This is occurring in IE11.

I have no problems running this in Chrome or Firefox, but my code must function in IE11 and I am receiving the following error:

Object doesn't support property or method 'getElementsByClassName'

function showNext(a) {
    var questions = document.getElementsByClassName("questionholder");
    showRequired.style.display = "none";

    for (var i = 0; i < questions.length; i++) {
        questions[i].style.display = "none";
    }

    var nextQuestion = document.getElementById("question" + a);

    if (nextQuestion !== null) {
        nextQuestion.style.display = "inline-block";
    }
}

The code is supposed to be looking here:

<form id="TheForm" style="display:block;">
    <div class="questionholder" id="question0" style="display:block">
        <a class="text2button" onclick="showNext(1)">Start</a>
    </div>
    <div class="questionholder" id="question1" style="display:block">
        <a class="text2button" onclick="showNext(2)">Q1</a>
    </div>
    <div class="questionholder" id="question2" style="display:block">
        <a class="text2button" onclick="showNext(3)">Q2</a>
    </div>
</form>

The code above will hide all divs and then show the div that matches the id "question"+a as determined by the button clicked.

What can I do to resolve the above error?

Solution

  • The fix is as follows:

    <meta http-equiv="X-UA-Compatible" content="IE=11" />