Encountering an Uncaught TypeError while trying to read properties of undefined (specifically 'remove') during a Change event is causing an issue for me

Question

Encountering an Uncaught TypeError while trying to read properties of undefined (specifically 'remove') during a Change event is causing an issue for me

Looking to update the icons by changing the class from .fa-plus to .fa-minus for this specific menu section

<div class="accordion-menu">
                                <h2 class="accordion-header" id="subseccOne">
                                    <button class="accordion-button-m" type="button" >
                                        <i class="fa-solid fa-plus"  data-bs-toggle="collapse" data-bs-target="#subsecollapseOne" aria-expanded="true" aria-controls="subsecollapseOne"></i> <a class="item-section" href="">SEGUNDO NIVEL </a>
                                    </button>
...

<code>const icon= document.querySelectorAll(".fa-solid");
    const plusIcon = document.querySelectorAll(".fa-plus");
    
    
    for (i =0; i < plusIcon.length; i++){
        plusIcon[i].addEventListener("click", function (){
           
            icon.classList.remove("fa-plus");
            icon.classList.add("fa-minus")
        });
    }

Encountering an error in the console when running the click event on the function:

menu_funcionalidad.js:29 Uncaught TypeError: Cannot read properties of undefined (reading 'remove') at HTMLElement.

javascript html css accordion bootstrap-5

Answer 1

Answer №1

The reason for the error is because you have already assigned the variable icon to a nodeList, so when attempting to change the classes, icon does not refer to an individual element. To address this issue, I recommend using event.target to target and manipulate the specific element that has been clicked.

const iconElements = document.querySelectorAll(".fa-solid");
const plusIcons = document.querySelectorAll(".fa-plus");
    
    
for (let i = 0; i < plusIcons.length; i++){
    plusIcons[i].addEventListener("click", event => {
       event.target.classList.remove("fa-plus");
       event.target.classList.add("fa-minus");
       plusIcons.forEach(item => {
         if (item !== event.target) item.classList.add('//class-name');
       });
    });
}

Answer 2

The reason for the error is because you have already assigned the variable icon to a nodeList, so when attempting to change the classes, icon does not refer to an individual element. To address this issue, I recommend using event.target to target and manipulate the specific element that has been clicked.

const iconElements = document.querySelectorAll(".fa-solid");
const plusIcons = document.querySelectorAll(".fa-plus");
    
    
for (let i = 0; i < plusIcons.length; i++){
    plusIcons[i].addEventListener("click", event => {
       event.target.classList.remove("fa-plus");
       event.target.classList.add("fa-minus");
       plusIcons.forEach(item => {
         if (item !== event.target) item.classList.add('//class-name');
       });
    });
}

Answer 3

Answer №2

When using document.querySelectorAll(".fa-solid"), you will receive a nodeList. This means that trying to access the classList within your loop will result in attempting to access the classList of a nodeList, which is not feasible.

If you wish to add/remove icons for each item in the node list mentioned above, you can iterate over the list using .forEach() method. (More information available <a href="https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach" rel="nofollow noreferrer">here</a>).

To add/remove an icon from the element currently being iterated over, replace icon.classList... with i.classList.

If the latter option aligns with your intentions, consider implementing a check inside the loop like so:

for (i = 0; i < plusIcon.length; i++){
        plusIcon[i].addEventListener("click", function (){
            if (i.classList.contains("fa-plus")) {
                icon.classList.remove("fa-plus");
            } else {
                icon.classList.add("fa-minus");
            }                 
    });
}

Answer 4

When using document.querySelectorAll(".fa-solid"), you will receive a nodeList. This means that trying to access the classList within your loop will result in attempting to access the classList of a nodeList, which is not feasible.

If you wish to add/remove icons for each item in the node list mentioned above, you can iterate over the list using .forEach() method. (More information available <a href="https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach" rel="nofollow noreferrer">here</a>).

To add/remove an icon from the element currently being iterated over, replace icon.classList... with i.classList.

If the latter option aligns with your intentions, consider implementing a check inside the loop like so:

for (i = 0; i < plusIcon.length; i++){
        plusIcon[i].addEventListener("click", function (){
            if (i.classList.contains("fa-plus")) {
                icon.classList.remove("fa-plus");
            } else {
                icon.classList.add("fa-minus");
            }                 
    });
}

Encountering an Uncaught TypeError while trying to read properties of undefined (specifically 'remove') during a Change event is causing an issue for me

Answer №1

Answer №2

Similar questions

What is the best way to use Python and Selenium to click on an angularjs link by comparing it to the text entered by the user?

How can you check the boolean value of a checkbox using jQuery?

Steps to displaying a genuine Docx file within a Material CardMedia

Unable to execute application due to invalid element type

What is the best way to incorporate multiple versions of jQuery on one webpage?

Tips on simulating the Q functions during unit testing in node.js using mocha and rewire!

Modify the starting URL in a Node.js application to /foo instead of just /

What could be causing the delay in my IP camera image updates?

What is the best way to broadcast video content from Google Cloud Storage to iOS Safari?

What are the reasons behind the unexpected behavior of the replace() method in the newest Safari update?

Unravel JSON using JavaScript on the web

Internal VS External Stylesheets: What you need to know

Exploring the challenges of applying styles to buttons using the :first-child and :last-child selectors, especially when

Customizing the appearance of Jquery UI Accordion Headers

Ensure you have the right zoom in and out percentages to properly test how your website responds on various browsers across different

Building a Loading Bar with Two Images Using JavaScript and CSS

What could be causing my Bootstrap 5 tabs to not switch when clicked?

Is it better to store data individually in localStorage or combine it into one big string?

The CSS scale property is not working as expected when used in a React.js application, specifically

Created a custom function that includes a specific target href parameter