JavaScript's ability to show and hide div elements functions properly in Internet Explorer, but is encountering issues in Firefox and Chrome

Question

JavaScript's ability to show and hide div elements functions properly in Internet Explorer, but is encountering issues in Firefox and Chrome

I have a total of 20 spans with unique IDs, all set to hidden in my stylesheet.

To toggle the visibility of these spans upon clicking on sections of an image map, I created this script:

function showDiv(pass) {
    var divs = document.getElementsByTagName('span');    
    for (i = 0; i < divs.length; i++) {
        if (divs[i].id.match(pass)) {
            (pass).style.visibility = 'visible';
            divs[i].style.visibility = 'hidden';
        }          
    }
}

The script works flawlessly in Internet Explorer, but Firefox seems to be having issues. Chrome also shows some minor problems that I believe can be fixed.

If you have any insights into why Firefox is not working or any suggestions for improvement, they would be sincerely appreciated and rewarded generously in the afterlife :)

javascript firefox dom-events

Answer 1

Answer №1

document.getElementById('element').style.display = 'none';
document.getElementById('element').style.display = 'inline';

UPDATE

Check out the resource I used for this code snippet.

http://www.w3schools.com/css/pr_class_display.asp

Answer 2

document.getElementById('element').style.display = 'none';
document.getElementById('element').style.display = 'inline';

UPDATE

Check out the resource I used for this code snippet.

http://www.w3schools.com/css/pr_class_display.asp

Answer 3

Answer №2

The reason for the issue is that you are passing a string and then later using it as an element reference. Internet Explorer needs to search the Document Object Model (DOM) to locate an element with an ID that matches the string.

Here is a suggestion...

if (divs[i].id.match(pass)) {
    document.getElementById(pass).style.visibility = 'visible';
    divs[i].style.visibility = 'hidden';
}

Alternatively, it is possible that the String.match function expects a regular expression. If the earlier solution does not solve your problem, you can try this...

if (divs[i].id.match(new RegExp(pass, 'gi'))) {

Answer 4

The reason for the issue is that you are passing a string and then later using it as an element reference. Internet Explorer needs to search the Document Object Model (DOM) to locate an element with an ID that matches the string.

Here is a suggestion...

if (divs[i].id.match(pass)) {
    document.getElementById(pass).style.visibility = 'visible';
    divs[i].style.visibility = 'hidden';
}

Alternatively, it is possible that the String.match function expects a regular expression. If the earlier solution does not solve your problem, you can try this...

if (divs[i].id.match(new RegExp(pass, 'gi'))) {

Answer 5

Answer №3

key is a unique identifier. When working with Firefox, IDs of elements in the Document Object Model (DOM) cannot be accessed as global variables. Trying to set id.style.visibility = 'visible'; will not work in this situation. Instead, your function needs to be structured like the following:

function displayElement(key) {
    var elements = document.getElementsByTagName('div');    
    for (i = 0; i < elements.length; i++) {
        if (elements[i].id.match(key)) {
            elements[i].style.visibility = 'hidden';
        }          
    }
    document.getElementById(key).style.visibility = 'visible';
}

You can adjust the visibility of key outside of the loop because it only needs to be done once.

Answer 6

key is a unique identifier. When working with Firefox, IDs of elements in the Document Object Model (DOM) cannot be accessed as global variables. Trying to set id.style.visibility = 'visible'; will not work in this situation. Instead, your function needs to be structured like the following:

function displayElement(key) {
    var elements = document.getElementsByTagName('div');    
    for (i = 0; i < elements.length; i++) {
        if (elements[i].id.match(key)) {
            elements[i].style.visibility = 'hidden';
        }          
    }
    document.getElementById(key).style.visibility = 'visible';
}

You can adjust the visibility of key outside of the loop because it only needs to be done once.

Answer 7

Answer №4

    if (divs[i].id.match(password)) {

Why is password being used as a regular expression here? It's not typical to see match with this setup.

        (password).style.visibility = 'visible';

Whether password is a string or a regex, it doesn't make logical sense in this context. Both types do not have a style property. Placing the variable in parentheses does not change anything. I've tested this code across different browsers and it doesn't work properly, including IE.

Perhaps you intended something like this instead:

function displayDiv(password) {
    var divs= document.getElementsByTagName('span');    
    for (var i= 0; i<divs.length; i++)
        divs[i].style.visibility= divs[i].id==password ? 'visible' : 'hidden';
}

Also, notice the use of var i: this declaration prevents i from becoming a global variable. Not defining it can lead to unexpected errors when multiple for i loops start conflicting with each other.

Answer 8

    if (divs[i].id.match(password)) {

Why is password being used as a regular expression here? It's not typical to see match with this setup.

        (password).style.visibility = 'visible';

Whether password is a string or a regex, it doesn't make logical sense in this context. Both types do not have a style property. Placing the variable in parentheses does not change anything. I've tested this code across different browsers and it doesn't work properly, including IE.

Perhaps you intended something like this instead:

function displayDiv(password) {
    var divs= document.getElementsByTagName('span');    
    for (var i= 0; i<divs.length; i++)
        divs[i].style.visibility= divs[i].id==password ? 'visible' : 'hidden';
}

Also, notice the use of var i: this declaration prevents i from becoming a global variable. Not defining it can lead to unexpected errors when multiple for i loops start conflicting with each other.

JavaScript's ability to show and hide div elements functions properly in Internet Explorer, but is encountering issues in Firefox and Chrome

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Material UI Table dynamically updates with Firestore real-time data

Automatic execution of expressions in browserify upon initialization

Tips for adjusting the vertical position of an image within a bootstrap column by a small amount

It is impossible to alter the data contained within the input box

Angular2 Error: Cannot have two identifiers with the same name, 'PropertyKey' is duplicated

What is the best way to hand off slots to a descendant component in Vue 3?

The error message states: "It is not possible to destructure the property 'createComponentInstance' of 'Vue.ssrUtils' as it is undefined for nuxt and jest."

What is the best way to position the left sidebar on top of the other components and shift them to the

ApolloError: Undefined fragment detected and unable to be used

Effective strategies for organizing component features in React

Add video details to the database using the API

Warning: An unhandled promise rejection occurred while using agenda

What is the purpose of the 'onClassExtended' function in Extjs 6 for class definition?

The issue here is that "onreadystatechange" in JS Ajax is not defined, even

Effective ways to manage extensive forms in Angular 2

Arrangement of Bootstrap card components

unable to modify the content within a div by clicking on a link

Ensure that the alert for an Ajax JSON record count remains active when the count is

Testing components in React Native using asynchronous Jest methods

Entering a new row and sending information through ajax