The functionality of classList.contains('outputDiv') is not compatible with IE 9 and earlier versions

The method classList.contains('outputDiv') does not work in IE 9 and older versions. Does anyone know of an alternative solution?

Here is the code I am currently using:

function toggleclass() {

    var elems = document.getElementsByClassName("outputDivs");
    for (var i = 0; i < elems.length; ++i) {
        if (elems[i].classList.contains("outputDivsDesigned"))
            elems[i].className = "outputDivs";

        else
            elems[i].className += " outputDivsDesigned";
    }
}

Appreciate any assistance.

javascriptinternet-explorercontains

Answer №1

If you're looking for a solution, check out this script at https://github.com/eligrey/classList.js

Alternatively, you can simply utilize className and look through the resulting string.

Answer №2

Just finished crafting this piece, could it provide some assistance?

This article outlines a straightforward alternative approach that you might find useful:

function checkForClass(element, className) {
    if(!element || typeof className !== 'string') {
        return false;
    } else if(element.className && element.className.trim().split(/\s+/gi).indexOf(className) > -1) {
        return true;
    } else {
        return false;
    }
}

To use the function, simply execute it with your desired parameters like so:

var isDesiredClass = checkForClass(obj, 'desired-class-name');

Note: I've enhanced the function to validate the presence of element and ensure className is a string.

Answer №3

Without testing it across different browsers, I cannot guarantee if it will work. You can try the following code snippet: 

  classList.indexOf("outputDivsDesigned") != -1

Answer №4

To achieve the functionality of .contains(), you can search for the substring within the className by using 

elems[i].className.indexOf("outputDivsDesigned") > -1
.

Here's how your function would be structured:

function toggleclass() {    
    var elems = document.getElementsByClassName("outputDivs");
    for (var i = 0; i < elems.length; ++i) {
        if (elems[i].className.indexOf("outputDivsDesigned") > -1)
            elems[i].className = "outputDivs";    
        else
            elems[i].className += " outputDivsDesigned";
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble finding the file '../node_modules/bootstrap/dist/css/bootstrap.min.css'?

I'm currently working on a project where I am using react-bootstrap-table2 to create a bootstrap table. However, I encountered the following error: Failed to Compile: Module not found: Can't resolve '../node_modules/bootstrap/dist/css/boo ...

javascriptreactjsbootstrap-4

Discovering the server endpoint for the Star Wars SWAPI API: a step-by-step guide

I have been working on integrating a search query into the server-side endpoint, which interacts with swapi - the Star Wars API https://swapi.co/ to display a list of people by their names. Below is the fetch call made to the backend in App.js file using ...

javascriptnode.jsreactjsapiexpress

Switch the signs between plus and minus in Bootstrap 4.x Card Header

Currently, I am in the process of learning Bootstrap and have encountered an issue with the code provided below. The specific problems are as follows: 1- Upon expanding the card, I expected the plus sign to transition into a minus sign. However, this is n ...

javascripthtmlbootstrap-4

Leave a message | Google Sheets | JavaScript using nodeJS

I am having trouble adding comments to cells using the "Google Spread-Sheet" module in NODEJS. I have successfully written to cells, read from them, and deleted them, but I can't figure out how to add a comment to a cell. The tutorials I have found on ...

javascriptnode.jsgoogle-apigoogle-sheets-api

Arranging the letters in sequence through regular expressions in PHP

I attempted to use a regular expression in php/javascript to match the order of letters. My task was to find a 4 letter word where the first two letters are in order and the second two letters are also in order, like BCEF. I wanted to accomplish this usin ...

javascriptphpjqueryregex

What is the method for adding up elements based on their identification numbers?

Is it possible to calculate the sum of multiple range sliders using their unique IDs? Multiplying each range slider value by the corresponding input. And finally, adding up all the multiplication results. $(document).ready(function() { $(".range") ...

javascripthtmljqueryinputrange

Encountering an issue with Node JS request and cheerio while parsing an HTML page

Greetings all, I am currently attempting to parse a website using Node.js (utilizing request and cheerio). The issue I am encountering is that I am trying to extract the href from the site, but I can only find it within the site's window. Unfortunatel ...

javascriptnode.jsparsingweb-scrapingrequest

What is the method for transitioning the cursor to the next text box?

During my project implementation, I attempted to enable the functionality of moving focus from one text field to another by pressing the enter key. I did some research and came across a few relevant links: How to go to next textbox when enter is pressed? ...

javascriptjquery

When storing array values in objects, only the first value is saved and is repeatedly replaced with the same value

As a newcomer to JavaScript, my programming skills are not very strong at the moment. I have been working on a web scraper that returns an array of information including names, posts, bios, and more using the following code: let infoOfPost = await newTab(b ...

javascriptnode.jsarraysobjectpuppeteer

Cannot trigger event ascn.onchange does not exist as a function

Need to trigger the onChange function and pass parameters within it. Here's what I have tried: setTimeout(function() { document.getElementById(input.key)?.onchange({}) }, 200); Encountering the following error message: cn.onchange is not a function ...

javascriptangulartypescripttimer

Encountering issues with JSON.Parse in JavaScript leads to errors

I'm encountering issues with JSON parsing in my code and I can't figure out the cause of it. I have a function that calls two ajax functions, one at the start and another in the success function. Everything seems to be working fine until I try to ...

javascriptjqueryjson

What is the process for inserting a div with an identifier when my check box is selected?

I'm currently working on a dynamic table with table cells that contain checkbox inputs. These checkboxes switch the text between "Available" and "Blocked" depending on whether they are checked or not. I am now trying to add a div with an ID that will ...

javascriptjqueryhtmlcheckbox

Is there a need to minify if the data will be compressed through gzip during

During the early days (yes, I'm really showing my age here), it was possible to reference scripts from a renamed zip file using this format: <script archive="path/to.jar" src="some.js"></script> This method was supported in IE4, NS4, and ...

javascripthtml

Using React hooks and Typescript: I was expecting to see an assignment or function call, but instead, an expression was

After working as a React developer for quite some time, my workplace recently introduced Typescript, which I am still getting familiar with. I implemented a custom hook for managing cookies, but the function it returns is generating an error. Here's ...

javascriptreactjstypescript

Instead of returning an object, the underscore groupBy function now returns an array

Currently, I am attempting to utilize underscore to create an array of entities that are grouped by their respective locations. The current format of the array consists of pairs in this structure { location: Location, data: T}[]. However, I aim to rearran ...

javascriptangulartypescriptunderscore.js

Extract latitude and longitude coordinates from a dataset by applying a rectangular filter

I have developed a program that extracts information from a JSON object and showcases it on a webpage, specifically focusing on Public Bike Stations. The JSON object includes the latitude and longitude of each station, making it easy to locate them. My cu ...

javascriptjqueryhtmljsoncoordinates

Increasing the sms counter in javascript once it reaches 160 characters

I am facing an issue with my two counters that are used to track the number of characters in a message. Everything works fine until 160 characters, but after that point, the first counter stops at 0 instead of resetting back to 160 and decreasing from ther ...

javascriptangularjs

I'm unable to see the D3.js text within the center of the SVG circle

I am working on visualizing a sunburst and facing an issue with placing text inside the SVG circle at the center of the sunburst. The circle renders perfectly, but I can't seem to get any text to display in the middle. I have created a demonstration o ...

javascriptd3.jssvg

Activate modifications in a distinct column?

I've been exploring a solution to achieve a similar functionality where clicking or hovering on headings in a column brings up corresponding text in another column. My idea is to use list items with a carousel for this purpose, but I'm facing so ...

javascripthtmlcss

Choosing just the element that was clicked and added to the DOM

I've been experimenting with JQuery in a web app I'm developing. The app involves dynamically adding elements to the DOM, but I've encountered an issue with click events for these newly added elements. I'm looking for a way to target an ...

javascriptjquerydomclick