-1

I have a function which simply changes the class of an element based on a click. It works fine everywhere but IE8. Any assistance would be great!

This is the function:

function attachToggleReportType (elem) {
    elem.addEventListener('change', toggleReportType);
}

function toggleReportType () {
var reportOptions = document.querySelectorAll('.report'),
    reportIncToggle = document.querySelectorAll('.toggle');

reportSample({
    href: this.getAttribute('data-sample-report-link'),
    src: this.getAttribute('data-sample-report-image')
});

reportIncToggle.forEach(toggleInclude);

    var report_type = $(this).find('input[type=radio]').val();
    report_type = ( report_type == 1 ? 'Verified' : 'Claims');
    // analytics.updateType(report_type);
}

function toggleInclude (item) {
    item.classList.toggle('notIncluded');
    item.classList.toggle('included');
}

HTML

<li class="larger toggle notIncluded">
    <span>Cross-Canada lien search</span>
    <br>
    Exclusive to CARPROOF <strong>Verified</strong> reports, we’ll tell you if there’s money owing on the vehicle.
</li>
Brady
  • 733
  • 1
  • 6
  • 16
  • 2
    Since you're already using jQuery, simply use `toggleClass()`. It will overcome browser inconsistencies. – Rick Hitchcock Nov 19 '15 at 21:59
  • 1
    [`classList` is one of the many things IE8 does not support](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility). And neither does IE9. Either load up a polyfill, at least one exists, or use jQuery or some other library instead. – Alexander O'Mara Nov 19 '15 at 22:01
  • Possible duplicate of [Code with classList does not work in IE?](http://stackoverflow.com/questions/8098406/code-with-classlist-does-not-work-in-ie) – Alexander O'Mara Nov 19 '15 at 22:07
  • http://caniuse.com/ is your friend – Ruan Mendes Nov 19 '15 at 22:10
  • Duplicate of http://stackoverflow.com/questions/8098406/code-with-classlist-does-not-work-in-ie and probably many more. You should do a little google search before asking a question on stackoverflow. – Eyal Nov 19 '15 at 22:13

2 Answers2

1

It looks like you are using jQuery, which provides cross-browser support for manipulating classes on elements. Also forEach is not supported in IE 8

classList browser support

forEach browser support

jQuery

$('.elementClass').toggleClass('className');

JSFiddle (without jQuery and supports IE8)

Enijar
  • 6,387
  • 9
  • 44
  • 73
0

classList is not supported by IE8 or 9. Since you are already using jQuery, you should just use: jQuery.toggleClass.

$(item).toggleClass('notIncluded included');
Ruan Mendes
  • 90,375
  • 31
  • 153
  • 217