If the HTML DOM is unresponsive on the initial click of an element, consider using JavaScript to troubleshoot the issue

Question

If the HTML DOM is unresponsive on the initial click of an element, consider using JavaScript to troubleshoot the issue

I recently encountered an issue while working on a school webpage. I implemented some JavaScript code to show and hide certain elements upon click, but ran into trouble with external CSS properties not being recognized by the script.

function grabClassName(name) {
  return document.getElementsByClassName(name);
}
var txt = grabClassName('txt');
function toggleDisplay(elementArray, index) {
  if (elementArray[index].style.display == 'none') {
    elementArray[index].style.display = 'block';
  } else {
    elementArray[index].style.display = 'none';
  }
}

The target object with the class 'txt' had the display set to none in the CSS file, but the JS code didn't seem to acknowledge this setting.

Upon first click, the .txt object was not displayed as expected

It took a second click to finally reveal the object

Why isn't the 'display: none;' property from the external CSS file being honored?

Another issue I faced:

I have a div identified as 'content' that has a box-shadow property. When trying to modify it through JavaScript based on a link click in the navigation menu, I received the error "Cannot read property 'style' of null."

var n = document.getElementById("content");

function removeBoxShadow() {
    n.style.boxShadow = '0px 0px 0px black';
}

Switching from id to class resolved the error, but caused some instability.

javascript html css if-statement

Answer 1

Answer №1

When you set display in a stylesheet, initially the value of display.style will be "". This causes issues with checking if

variable[number].style.display == 'none'

even when the element is not visible.

It is generally not recommended to check the current style.display; instead, it is better to use a variable to store the state, switch the variable, and then set the style based on that variable.

If you need a quick fix, you can try reversing the logic:

function display(variable, number) {
  var s = variable[number].style;
  s.display = s.display == 'block' ? 'none' : 'block';
}

(However, this approach may only work for elements that start with display: none; otherwise, the first function call might fail for the same reason as your original version.)

Answer 2

When you set display in a stylesheet, initially the value of display.style will be "". This causes issues with checking if

variable[number].style.display == 'none'

even when the element is not visible.

It is generally not recommended to check the current style.display; instead, it is better to use a variable to store the state, switch the variable, and then set the style based on that variable.

If you need a quick fix, you can try reversing the logic:

function display(variable, number) {
  var s = variable[number].style;
  s.display = s.display == 'block' ? 'none' : 'block';
}

(However, this approach may only work for elements that start with display: none; otherwise, the first function call might fail for the same reason as your original version.)

Answer 3

Answer №2

Correct, the DOMElement.style object is synonymous with the style attribute.

When applying styles from an external stylesheet, the Computed Style method is required.

Answer 4

Correct, the DOMElement.style object is synonymous with the style attribute.

When applying styles from an external stylesheet, the Computed Style method is required.

Answer 5

Answer №3

It appears that some coding is required:

    ul.menu {
    margin: 0;
    padding: 0;
    list-style: none;

    max-width: 200px;
}

ul.menu > li {
    background-color: #efefef;
    width: 100%;

    text-align: center;

    padding: 5px 0;

    border-radius: 10px;

    cursor: pointer;
}

ul.menu > li:hover {
    background-color: #dedede;
}

ul.menu > li > div.info {
    display: none;
}

ul.menu > li > div.info.active {
    display: block;

    background-color: white;
    margin: 5px;
    padding: 5px;
}

HTML

<ul class="menu">
<li class="btn">
    One

    <div class="info">One upon a time</div>
</li>
<li class="btn">
    Two
    <div class="info">Two moons</div>
</li>
<li class="btn">
    Three
    <div class="info">Three pigs</div>
</li>

JS:

 (function() {
    var btns = document.getElementsByClassName('btn');

    Object.keys(btns).map(function(key) {
        var btn = btns[key];

        btn.onclick = function (event) {
            var info = event.target.getElementsByClassName('info');

            if (info.length) {
                if (info[0].className.indexOf('active') < 0) {
                    info[0].className += ' active';
                } else {
                    info[0].className = 'info';
                }
            }
        }
    });
})();

Answer 6

It appears that some coding is required:

    ul.menu {
    margin: 0;
    padding: 0;
    list-style: none;

    max-width: 200px;
}

ul.menu > li {
    background-color: #efefef;
    width: 100%;

    text-align: center;

    padding: 5px 0;

    border-radius: 10px;

    cursor: pointer;
}

ul.menu > li:hover {
    background-color: #dedede;
}

ul.menu > li > div.info {
    display: none;
}

ul.menu > li > div.info.active {
    display: block;

    background-color: white;
    margin: 5px;
    padding: 5px;
}

HTML

<ul class="menu">
<li class="btn">
    One

    <div class="info">One upon a time</div>
</li>
<li class="btn">
    Two
    <div class="info">Two moons</div>
</li>
<li class="btn">
    Three
    <div class="info">Three pigs</div>
</li>

JS:

 (function() {
    var btns = document.getElementsByClassName('btn');

    Object.keys(btns).map(function(key) {
        var btn = btns[key];

        btn.onclick = function (event) {
            var info = event.target.getElementsByClassName('info');

            if (info.length) {
                if (info[0].className.indexOf('active') < 0) {
                    info[0].className += ' active';
                } else {
                    info[0].className = 'info';
                }
            }
        }
    });
})();

If the HTML DOM is unresponsive on the initial click of an element, consider using JavaScript to troubleshoot the issue

Answer №1

Answer №2

Answer №3

Similar questions

Leveraging geoPosition.js in conjunction with colobox

Apply borders to the table provided in the email using Python

"Troubleshooting callback errors and viewing statistics in multi-configuration setups

What is the best way to maximize the width of this element?

What is the best method for sending a PHP variable to an AJAX request?

Guide to automatically loading a default child route in Angular 1.5 using ui-router

It is not possible to transfer information to a JSON document using node.js filesystem and browserify

Issues with functionality of Bootstrap 5 popover in responsive JavaScript DataTable

Error: A TypeError occurred with the startup because it was unable to read the property 'Collection' as it was

Is it possible to incorporate this design in a way that is responsive?

How to use jQuery to dynamically add a variable to a request in Laravel 5.2

What could be causing my CSS dropdown menu to not display properly?

Tips on allowing a rectangle to be draggable using HTML5

Steps for inserting a menu item into a Material UI Card

Utilizing Ajax to retrieve an array of input textboxes and showcase the outcome within a div container

In a Javascript scenario, only the initial button can successfully submit to an Ajax form even when having unique

Discover the nodes with the highest connections in a D3 Force Graph

What could be the reason for Spawn() not being invoked?

Looking for assistance in adding some animated flair to your website as users scroll

What is the reason for the countdown number's color remaining the same even after it reaches a specific time threshold?