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

Switching between height: 0 and height:auto dynamically with the power of JavaScript and VueJS

Tips on adding several elements to an array depending on the selected value from various checkboxes?

Unlocking the potential of input values in Angular.jsDiscovering the secret to

Encountering the error "ReferenceError: Cannot access 'data' before initialization" during deployment on Vercel

The functionality of the Javascript window.print() method is limited to a single use

Tips for converting a URL to the correct route in emberjs when the location type is set to history

Finding the amount of memory that can be used in a WebView

What is the method for iterating through rows using csv-parser in a nodejs environment?

Node JS Client.query not returning expected results

Send the form via ajax

Is it possible to integrate Vue.js within a web component?

Saving the author of a message from one function and transferring it to another

Is there a way to use ng-click to switch the ng-src of one image with that of another?

Selecting from a variety of options presented as an array of objects

Display various MongoDB datasets in a single Express route

How can I simulate pressing the ENTER key in Selenium without selecting any element?

Improve numerous conditions

Having trouble getting the default NextJS template to work with TailwindCSS

Using AJAX to dynamically load content from a Wordpress website

Krajee Bootstrap File Input, receiving AJAX success notification