The JavaScript switch statement is malfunctioning

Question

The JavaScript switch statement is malfunctioning

I am facing an issue with a switch statement in my code. The switch has multiple cases that compare values and assign a corresponding text to a variable. However, when I run the switch statement, it always executes the default case even though my condition is true. Why could this be happening?

Value:

Apartment

Code snippet:

var rental_cat = $('#rentals_type').val();
alert(rental_cat);
var rental_type = "";
switch (rental_cat) {
case (rental_cat == "Apartment"): 
    rental_type='daily';
    alert(rental_type);
    break;
case (rental_cat == "Office"):
    rental_type='work_daily';
    alert(rental_type);
    break;
default:
    rental_type='other';
    alert(rental_type);
    break;
}

Upon execution of the switch statement, the result always shows "other" as the output.

javascript

Answer 1

Answer №1

Eliminate the if statement inside the "case" block.

Give this a shot:

var rental_cat = $('#rentals_type').val();

    alert(rental_cat);

    var rental_type = "";

    switch (rental_cat) {

    case "Apartment": 
                                        rental_type='daily';
                                        alert(rental_type);
                                        break;

    case "Office":
                                        rental_type='work_daily';
                                        alert(rental_type);
                                        break;

    default:
                                        rental_type='other';
                                        alert(rental_type);
                                        break;
}

Answer 2

Eliminate the if statement inside the "case" block.

Give this a shot:

var rental_cat = $('#rentals_type').val();

    alert(rental_cat);

    var rental_type = "";

    switch (rental_cat) {

    case "Apartment": 
                                        rental_type='daily';
                                        alert(rental_type);
                                        break;

    case "Office":
                                        rental_type='work_daily';
                                        alert(rental_type);
                                        break;

    default:
                                        rental_type='other';
                                        alert(rental_type);
                                        break;
}

Answer 3

Answer №2

When using a switch statement with the variable rental_cat, it is important to note that you should not include a condition within the case statement. Instead, the comparison is made between the switch and the cases themselves. For example:

This code:

switch (rental_cat) {
  case (rental_cat == "Apartment"):

is essentially equivalent to:

switch (rental_cat) {
  case true:

which can further be simplified to:

if (rental_cat === true)

To correct this issue, make sure your switch statement looks like this:

switch (rental_cat) {
  case "Apartment":

Answer 4

When using a switch statement with the variable rental_cat, it is important to note that you should not include a condition within the case statement. Instead, the comparison is made between the switch and the cases themselves. For example:

This code:

switch (rental_cat) {
  case (rental_cat == "Apartment"):

is essentially equivalent to:

switch (rental_cat) {
  case true:

which can further be simplified to:

if (rental_cat === true)

To correct this issue, make sure your switch statement looks like this:

switch (rental_cat) {
  case "Apartment":

Answer 5

Answer №3

To efficiently handle this issue, utilizing a map instead of a switch statement is advised:

var rentalTypesByCat = {
    DEFAULT:        "other",

    "Apartment":   "daily",
    "Office":       "work_daily",
}

var rental_cat = $('#rentals_type').val();
console.log("rental_cat:", rental_cat);

var rental_type = rentalTypesByCat[rental_cat] || rentalTypesByCat.DEFAULT;
console.log("rental_type:", rental_type);

If specificity is required (e.g., due to the possible falsy values in mapped data), consider using the following approach:

var rental_type = rentalTypesByCat[rental_cat in rentalTypesByCat? rental_cat: "DEFAULT"];
console.log("rental_type:", rental_type);

Answer 6

To efficiently handle this issue, utilizing a map instead of a switch statement is advised:

var rentalTypesByCat = {
    DEFAULT:        "other",

    "Apartment":   "daily",
    "Office":       "work_daily",
}

var rental_cat = $('#rentals_type').val();
console.log("rental_cat:", rental_cat);

var rental_type = rentalTypesByCat[rental_cat] || rentalTypesByCat.DEFAULT;
console.log("rental_type:", rental_type);

If specificity is required (e.g., due to the possible falsy values in mapped data), consider using the following approach:

var rental_type = rentalTypesByCat[rental_cat in rentalTypesByCat? rental_cat: "DEFAULT"];
console.log("rental_type:", rental_type);

The JavaScript switch statement is malfunctioning

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing the {{value}} parameter within the JavaScript block of the thinger.io HTML gadget

The 'classProperties' React component module is currently not enabled

"Redirecting to an HTML page from the POST method is not supported in the Flask backend and Vanilla JS frontend setup

Is it feasible for Javascript to trigger a callback or signal with Selenium?

What is the best way to convert and update document fields in MongoDB to GeoJSON format using Java?

Issue encountered while attempting to delete dynamically added fields

Socket connection in Vue not activating

Issue encountered while attempting to send an HTML file using express.js

What is causing me to only receive the first element in a JavaScript array that is being passed from Silverlight?

Receive the most recent query in a Nuxt plugin following the completion of page loading

TypeScript maintains the reference and preserves the equality of two objects

The SetInterval function will continue to run within a web component even after the corresponding element has been removed from the

Greetings Universe in angular.js

The W3C validator does not recognize any modifications made after jQuery and JavaScript have been applied

Getting data from components in React: A step-by-step guide

What's preventing access to class property in TypeScript when using asynchronous methods?

Using regular expressions to extract substrings from URL

Having difficulty integrating plugins like Lighthouse into my Cypress project

Jade: modify the text box input to show = " ..."

Error message in Typescript: "Property cannot be assigned to because it is immutable, despite not being designated as read-only"