switch statement not working in javascript

Question

I am experiencing an issue where a javascript function, is getting a var selectedMonth which is a string, and the alert dialog is showing the value of the string but for some reason the switch statement is not working. I am experiencing this issue on page load, it does work with <select> onchange listener.

in this case, i get alert Dezember but switch statement december doesn't get called.

function showDropDown(selectedMonth) {

  alert(selectedMonth);

  var settings = {
    "url": "",
    "method": "GET",
    "timeout": 0,
  };

  switch (selectedMonth) {
    case 'Januar':
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/1"
      break;
    case 'Februar':
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/2"
      break;
    case "März":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/3"
      break;
    case "April":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/4"
      break;
    case "Mai":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/5"
      break;
    case "Juni":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/6"
      break;
    case "Juli":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/7"
      break;
    case "August":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/8"
      break;
    case "September":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/9"
      break;
    case "Oktober":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/10"
      break;
    case 'November':
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/11"
      break;
    case 'Dezember':
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/12"
      break;
    default:
      // code block
  }

  alert(settings.url);
}

    $(".New_Plant_Month").change(function () {

        // Fetching Value
        var month = $(this).val();
        showDropDown(month);

    });

// show months
$(document).ready(function() {


  var month = $(".New_Plant_Month  option:selected").text() + "";
  showDropDown(month);

  for (var i = 0; i < 6; i++) {
    var d = new Date();
    var months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
    var monthName = months[new Date(d.setMonth(d.getMonth() - i)).getMonth()];

    //console.log(monthName);
    $('.New_Plant_Month').append($("<option>").val(monthName).text(monthName));
}

  


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="New_Plant_Month">
</select>

Preview

asp.net core code

        <!-- asp-items="New plant SelectList"-->
        <div class="form-group">

            <label asp-for="NewPlantMonth" class="control-label">Neue Pflanzen</label>
            <!-- asp-items="NewsSelectList"-->
            <select class="form-control Shoplist New_Plant_Month" onchange="showDropDown(this.value)" data-search="true" asp-for="NewPlantMonth">
                <option value="NewPlantMonth"> @{var selectedValue = Model.NewPlantMonth != null ? Model.NewPlantMonth : "Bitte Monat auswählen"; } @selectedValue </option>
</select>

<span asp-for="NewPlantMonth" class="text-danger"></span>
        </div>

How are you calling the function? showDropDown('Dezember')? — Nicholas Tower
– Nicholas Tower, Commented Dec 3, 2020 at 2:50
@NicholasTower i added the code where i call showDropDown(month). I call it on page load and the value is taken from <select> option. — Amir Dora.
– Amir Dora., Commented Dec 3, 2020 at 2:53
Actually the code is not in a good style... Try not to do so. For example, you can simply have a map or list from "month name" to "month index" — ch271828n
– ch271828n, Commented Dec 3, 2020 at 2:54
your code works ... the function creates this settings object that it does nothing with, but the code alerts the correct values - the urls are all invalid too, but since you do nothing with the url or anything in settings, then that's not an issue — Bravo
– Bravo, Commented Dec 3, 2020 at 2:57

Bilhasry Ramadhony · Accepted Answer · 2020-12-03 04:13:06Z

I guess what you need is an event listener, when user change the dropdown, you will call different api. Here I add event listener, when the dropdown change it will call your showDropdown function.

$('.New_Plant_Month').change((e) => {
 showDropDown(e.target.value);
})

Here is the code

function showDropDown(selectedMonth) {

console.log(selectedMonth);

  var settings = {
    "url": "",
    "method": "GET",
    "timeout": 0,
  };

  switch (selectedMonth) {
    case 'Januar':
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/1"
      break;
    case 'Februar':
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/2"
      break;
    case "März":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/3"
      break;
    case "April":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/4"
      break;
    case "Mai":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/5"
      break;
    case "Juni":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/6"
      break;
    case "Juli":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/7"
      break;
    case "August":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/8"
      break;
    case "September":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/9"
      break;
    case "Oktober":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/10"
      break;
    case 'November':
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/11"
      break;
    case 'Dezember':
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/12"
      break;
    default:
      // code block
  }

  alert(settings.url);
}


// show months
$(document).ready(function() {

  for (var i = 0; i < 6; i++) {
    var d = new Date();
    var months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
    var monthName = months[new Date(d.setMonth(d.getMonth() - i)).getMonth()];

    //console.log(monthName);
    $('.New_Plant_Month').append($("<option>").val(monthName).text(monthName));
}
  var month = $(".New_Plant_Month  option:selected").text() + "";

showDropDown(month);

  $('.New_Plant_Month').change((e) => {
     showDropDown(e.target.value);
  })

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="New_Plant_Month"></select>

onChange listener is working, i have mentioned that in the post also, i just haven't posted the code for that part.

V.Volkov · Accepted Answer · 2020-12-03 03:28:51Z

The order of codes gotta be a bit different - like that:

function showDropDown(selectedMonth) {

  alert(selectedMonth);

  var settings = {
    "url": "",
    "method": "GET",
    "timeout": 0,
  };

  switch (selectedMonth) {
    case 'Januar':
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/1"
      break;
    case 'Februar':
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/2"
      break;
    case "März":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/3"
      break;
    case "April":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/4"
      break;
    case "Mai":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/5"
      break;
    case "Juni":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/6"
      break;
    case "Juli":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/7"
      break;
    case "August":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/8"
      break;
    case "September":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/9"
      break;
    case "Oktober":
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/10"
      break;
    case 'November':
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/11"
      break;
    case 'Dezember':
      settings.url = "https://sslbeta.de/api/plantsearchapi/latest/12"
      break;
    default:
      // code block
  }

  alert(settings.url);
}


// show months
$(document).ready(function() {

  for (var i = 0; i < 6; i++) {
    var d = new Date();
    var months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
    var monthName = months[new Date(d.setMonth(d.getMonth() - i)).getMonth()];

    //console.log(monthName);
    $('.New_Plant_Month').append($("<option>").val(monthName).text(monthName));

  }

var month = $(".New_Plant_Month  option:selected").text() + "";
  showDropDown(month);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="New_Plant_Month"></select>

actually that's not the issue i am having. I updated the code at stackoverflow and accidentally put the code inside loop. It is outside the loop, so that is not the reason. Btw thanks for your time.

Makwana Prahlad · Accepted Answer · 2020-12-03 03:58:24Z

0

Please try this code, To switch statement not working in javascript

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var grade = 'C';
            document.write("Entering switch block<br />");
            switch (grade) {
               case 'A': document.write("Good job<br />");
               break;
            
               case 'B': document.write("Pretty good<br />");
               break;
            
               case 'C': document.write("Passed<br />");
               break;
            
               case 'D': document.write("Not so good<br />");
               break;
            
               case 'F': document.write("Failed<br />");
               break;
            
               default:  document.write("Unknown grade<br />")
            }
            document.write("Exiting switch block");
         //-->
      </script>      
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

I hope this code will be useful to you.

Thank you.

answered Dec 3, 2020 at 3:58

Makwana Prahlad

9245 silver badges22 bronze badges

1 Comment

Amir Dora. Over a year ago

normally switch statement works, but in my case it doesn't seem to work

Amir Dora. · Accepted Answer · 2020-12-04 10:54:52Z

0

The only fix i found to this was to trigger<select> via jquery change listener programmatically on page load otherwise the var selectedMonth in switch never passed.. as shown in above gif screenshot.

anyways here is the fix.

        $(document).ready(function () {
              .
              .
              .

            $('.New_Plant_Month')
                .trigger('change');

        });

edited Dec 4, 2020 at 10:54

answered Dec 4, 2020 at 10:48

Amir Dora.

2,7705 gold badges47 silver badges73 bronze badges

Collectives™ on Stack Overflow

switch statement not working in javascript

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related