Скачать или смотреть Understanding setAttribute 'false' Behavior in JavaScript

Explore the intricacies of setting HTML attributes dynamically using JavaScript. Learn why `aria-expanded` doesn't revert as expected and the solution to this common issue.
---
This video is based on the question https://stackoverflow.com/q/65998242/ asked by the user 'Gillian' ( https://stackoverflow.com/u/6381589/ ) and on the answer https://stackoverflow.com/a/65998493/ provided by the user 'pretzelhammer' ( https://stackoverflow.com/u/2766908/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Why does setAttribute 'false' work on another button but not on self in Javascript?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Why Does setAttribute 'false' Work on Another Button but Not on Self in JavaScript?

JavaScript is a powerful tool for creating dynamic and interactive web pages. However, while developing a menu system using vanilla JavaScript, you might encounter unexpected behaviors, such as the setAttribute method not functioning as anticipated on a clicked button. In this guide, we will explore a common issue: why toggling the aria-expanded attribute on a button works for other buttons but fails for the button that triggered the action itself.

The Scenario

Imagine you have a menu system where clicking on a button opens or closes a submenu. Each button uses the aria-expanded attribute to indicate its state, and when clicked, it toggles its class to opened or removes it. Here’s a more detailed breakdown:

Behavior upon clicking a button:

If another button is clicked, the currently displayed button's aria-expanded changes from true to false, and the opened class is removed.

However, if the original button is clicked again, although it removes the opened class, the aria-expanded attribute does not change back to false. This can be a sources of confusion when trying to manage states in your menu.

Understanding the Problem

To understand why the setAttribute method behaves differently when triggered from the original button, let's take a closer look at the existing JavaScript code:

[[See Video to Reveal this Text or Code Snippet]]

In the above code:

The loop iterates through each button.

When a button is clicked, the code removes the opened class and sets aria-expanded to false for all other buttons.

The clicked button only toggles its class to opened and sets aria-expanded to true, which is why it does not revert back as expected upon a second click.

The Solution: Adding Logic to Check State

To ensure that the aria-expanded attribute updates correctly on the button that has been clicked, we need to check whether the opened class is present after toggling. Here’s how to update the implementation:

Use classList.contains: This method will check if the button currently has the opened class.

Set the aria-expanded Attribute: Based on whether the class was added or removed, update the aria-expanded attribute accordingly.

Here’s the modified code snippet that addresses these requirements:

[[See Video to Reveal this Text or Code Snippet]]

CSS and HTML for Reference

To give you a complete picture, here’s how the accompanying CSS and HTML look for this menu system:

CSS Styles:

[[See Video to Reveal this Text or Code Snippet]]

HTML Structure:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By adding logic to check whether the button has the opened class before updating the aria-expanded attribute, you can ensure that your button behaves as expected regardless of how many times it’s clicked. This not only enhances user experience but also ensures proper accessibility, as the aria-expanded attribute plays a critical role for users relying on assistive technologies.

With this solution, you can confidently manage button states and provide a seamless interaction for your users.