Error encountered in jQuery's addClass and removeClass functions: Unable to read the property 'length' of an undefined value

Question

Error encountered in jQuery's addClass and removeClass functions: Unable to read the property 'length' of an undefined value

Upon loading my page, I aim to have some of the div elements hidden initially and display only one. Here is a script that accomplishes this goal:

<script>
    $(document).ready(function () {
        $(".total").click(function () {
            $("#piechart").removeClass('hidden');
            $("#piechartS").addClass('hidden');
            $("#piechartB").addClass('hidden');
            $("#piechartD").addClass('hidden');
        });
        $(".squat").click(function () {
            $("#piechart").addClass('hidden');
            $("#piechartS").removeClass('hidden');
            $("#piechartB").addClass('hidden');
            $("#piechartD").addClass('hidden');
        });
        $(".benchpress").click(function () {
            $("#piechart").addClass('hidden');
            $("#piechartS").addClass('hidden');
            $("#piechartB").removeClass('hidden');
            $("#piechartD").addClass('hidden');
        });
        $(".deadlift").click(function () {
            $("#piechart").addClass('hidden');
            $("#piechartS").addClass('hidden');
            $("#piechartB").addClass('hidden');
            $("#piechartD").removeClass('hidden');
        });
    });
</script>

And here are the corresponding div elements:

<div id="piechart" class="repPieChart"></div>                
<div id="piechartS" class="repPieChart hidden"></div>
<div id="piechartB" class="repPieChart hidden"></div>
<div id="piechartD" class="repPieChart hidden"></div>

CSS Styling:

.hidden {
    display: none;
}
.repPieChart {
    width: 100%;
    height: 500px;
    border-bottom: 5px solid #898989;
}

The intention is for the first div to be visible by default without the hidden class while the others remain hidden. When clicking on an anchor tag associated with these click events, the script should toggle the visibility of the corresponding div elements. However, despite the classes being added/removed correctly based on inspection in Chrome, only the first div remains visible, triggering an error.

What could potentially be causing this issue?

javascript jquery html css

Answer 1

Answer №1

Check out my JSFiddle to see some code in action:


$(document).ready(function () {
    var elements = ['#chartA', '#chartB', '#chartC', '#chartD'];
    
    hideAll();
    
    function showElement(item) {
        for(var i = 0; i < elements.length; i++) {
            if(elements[i] === item) {
                $(elements[i]).show();
            } else {
                $(elements[i]).hide();
            }
        }
    }
    
    $(".buttonA").click(function() {
        showElement("#chartA");
    });
    
    $(".buttonB").click(function() {
        showElement("#chartB");   
    });
    
    $(".buttonC").click(function() {
        showElement("#chartC");
    });
    
    $(".buttonD").click(function() {
        showElement("");
    });
});

Updated to work properly and start hidden

Answer 2

Check out my JSFiddle to see some code in action:


$(document).ready(function () {
    var elements = ['#chartA', '#chartB', '#chartC', '#chartD'];
    
    hideAll();
    
    function showElement(item) {
        for(var i = 0; i < elements.length; i++) {
            if(elements[i] === item) {
                $(elements[i]).show();
            } else {
                $(elements[i]).hide();
            }
        }
    }
    
    $(".buttonA").click(function() {
        showElement("#chartA");
    });
    
    $(".buttonB").click(function() {
        showElement("#chartB");   
    });
    
    $(".buttonC").click(function() {
        showElement("#chartC");
    });
    
    $(".buttonD").click(function() {
        showElement("");
    });
});

Updated to work properly and start hidden

Answer 3

Answer №2

Here's a functional example of your post – what appears to be malfunctioning?

$(document).ready(function () {
        $(".total").click(function () {
            $("#piechart").removeClass('hidden');
            $("#piechartS").addClass('hidden');
            $("#piechartB").addClass('hidden');
            $("#piechartD").addClass('hidden');
        });
        $(".squat").click(function () {
            $("#piechart").addClass('hidden');
            $("#piechartS").removeClass('hidden');
            $("#piechartB").addClass('hidden');
            $("#piechartD").addClass('hidden');
        });
        $(".benchpress").click(function () {
            $("#piechart").addClass('hidden');
            $("#piechartS").addClass('hidden');
            $("#piechartB").removeClass('hidden');
            $("#piechartD").addClass('hidden');
        });
        $(".deadlift").click(function () {
            $("#piechart").addClass('hidden');
            $("#piechartS").addClass('hidden');
            $("#piechartB").addClass('hidden');
            $("#piechartD").removeClass('hidden');
        });
    });

.hidden {
  display: none;
}
button {
  cursor: pointer;
}
#piechart {
  border: 1px dotted blue;
}
#piechartS {
  border: 1px dotted red;
}
#piechartB {
  border: 1px dotted green;
}
#piechartD {
  border: 1px dotted black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="piechart" class="repPieChart">A</div>                
<div id="piechartS" class="repPieChart hidden">S</div>
<div id="piechartB" class="repPieChart hidden">B</div>
<div id="piechartD" class="repPieChart hidden">D</div>

<button class="total">
Total!
</button>
<button class="squat">
Squat!
</button>
<button class="benchpress">
Benchpress!
</button>
<button class="deadlift">
Deadlift!
</button>

However, there is a way to make this much shorter. Below, each button now has a data-for attribute that corresponds to a specific div. This code snippet simply shows the relevant div and hides all its siblings:

$(document).ready(function() {
      $(".holdLiftMenuLI a").on("click", function() {
        $("#" + $(this).data("for")).removeClass("hidden")
          .siblings().addClass("hidden");
      });
    });

.hidden {
  display: none;
}
.holdLiftMenuLI {
  list-style-type: none;
}
.holdLiftMenuLI a {
  cursor: pointer;
}
#piechart {
  border: 2px solid blue;
}
#piechartS {
  border: 2px solid red;
}
#piechartB {
  border: 2px solid green;
}
#piechartD {
  border: 2px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="piechart" class="repPieChart">A</div>
  <div id="piechartS" class="repPieChart hidden">S</div>
  <div id="piechartB" class="repPieChart hidden">B</div>
  <div id="piechartD" class="repPieChart hidden">D</div>
</div>

<div class="holdLiftMenu">
  <ul class="holdLiftMenuUL">
    <li class="holdLiftMenuLI"><a class="holdLiftMenuA total current" data-for="piechart">Total</a></li>
    <li class="holdLiftMenuLI"><a class="holdLiftMenuA squat" data-for="piechartS">Squat</a></li>
    <li class="holdLiftMenuLI"><a class="holdLiftMenuA benchpress" data-for="piechartB">Benchpress</a></li>
    <li class="holdLiftMenuLI"><a class="holdLiftMenuA deadlift" data-for="piechartD">Deadlift</a></li>
  </ul>
</div>

By changing the selectors in jQuery to target the li’s and a’s, everything continues to function smoothly.

Answer 4

Here's a functional example of your post – what appears to be malfunctioning?

$(document).ready(function () {
        $(".total").click(function () {
            $("#piechart").removeClass('hidden');
            $("#piechartS").addClass('hidden');
            $("#piechartB").addClass('hidden');
            $("#piechartD").addClass('hidden');
        });
        $(".squat").click(function () {
            $("#piechart").addClass('hidden');
            $("#piechartS").removeClass('hidden');
            $("#piechartB").addClass('hidden');
            $("#piechartD").addClass('hidden');
        });
        $(".benchpress").click(function () {
            $("#piechart").addClass('hidden');
            $("#piechartS").addClass('hidden');
            $("#piechartB").removeClass('hidden');
            $("#piechartD").addClass('hidden');
        });
        $(".deadlift").click(function () {
            $("#piechart").addClass('hidden');
            $("#piechartS").addClass('hidden');
            $("#piechartB").addClass('hidden');
            $("#piechartD").removeClass('hidden');
        });
    });

.hidden {
  display: none;
}
button {
  cursor: pointer;
}
#piechart {
  border: 1px dotted blue;
}
#piechartS {
  border: 1px dotted red;
}
#piechartB {
  border: 1px dotted green;
}
#piechartD {
  border: 1px dotted black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="piechart" class="repPieChart">A</div>                
<div id="piechartS" class="repPieChart hidden">S</div>
<div id="piechartB" class="repPieChart hidden">B</div>
<div id="piechartD" class="repPieChart hidden">D</div>

<button class="total">
Total!
</button>
<button class="squat">
Squat!
</button>
<button class="benchpress">
Benchpress!
</button>
<button class="deadlift">
Deadlift!
</button>

However, there is a way to make this much shorter. Below, each button now has a data-for attribute that corresponds to a specific div. This code snippet simply shows the relevant div and hides all its siblings:

$(document).ready(function() {
      $(".holdLiftMenuLI a").on("click", function() {
        $("#" + $(this).data("for")).removeClass("hidden")
          .siblings().addClass("hidden");
      });
    });

.hidden {
  display: none;
}
.holdLiftMenuLI {
  list-style-type: none;
}
.holdLiftMenuLI a {
  cursor: pointer;
}
#piechart {
  border: 2px solid blue;
}
#piechartS {
  border: 2px solid red;
}
#piechartB {
  border: 2px solid green;
}
#piechartD {
  border: 2px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="piechart" class="repPieChart">A</div>
  <div id="piechartS" class="repPieChart hidden">S</div>
  <div id="piechartB" class="repPieChart hidden">B</div>
  <div id="piechartD" class="repPieChart hidden">D</div>
</div>

<div class="holdLiftMenu">
  <ul class="holdLiftMenuUL">
    <li class="holdLiftMenuLI"><a class="holdLiftMenuA total current" data-for="piechart">Total</a></li>
    <li class="holdLiftMenuLI"><a class="holdLiftMenuA squat" data-for="piechartS">Squat</a></li>
    <li class="holdLiftMenuLI"><a class="holdLiftMenuA benchpress" data-for="piechartB">Benchpress</a></li>
    <li class="holdLiftMenuLI"><a class="holdLiftMenuA deadlift" data-for="piechartD">Deadlift</a></li>
  </ul>
</div>

By changing the selectors in jQuery to target the li’s and a’s, everything continues to function smoothly.

Error encountered in jQuery's addClass and removeClass functions: Unable to read the property 'length' of an undefined value

Answer №1

Answer №2

Similar questions

The addEventListener function seems to be malfunctioning in the React JS component

Tips for accessing the names of subdirectories and files on a website

Ensure your mobile device is age 13 or over before proceeding

Deactivate filtering for the column in the header, while retaining it in the toolbar

When the function $(document).width() is called, it may yield varying results depending on the timing of the call

jade, express, as well as findings from mysql

formik does not support using the "new Date" function as an initial value

Performing jQuery Ajax Request with multiple Form Elements

Acquiring variables from a JQuery Ajax request while invoking a JavaScript file

Express middleware for handling errors with Node.js router

The issue with launching a Node.js server in a production environment

Steps for assigning innerHTML values to elements within a cloned div

Template does not reflect changes made to filters in real-time

What is the best way to transform a standard select input into a React select with multiple options?

The output of the Node.js crypto.pbkdf2 function may not match the result obtained from CryptoJS.PBKDF

Creating Dynamic Tables with jQuery

I am experiencing issues with my local MongoDB database not properly storing data when using Express and Mongoose

What is the most effective way to transfer an array from one PHP file to a different JavaScript file?

Encountering repetitive actions during the processing of the MVC controller operation

A windows application developed using either Javascript or Typescript