Получение неправильного оператора case переключения порядка в JavaScript

Итак, я пытаюсь сделать случай переключения на основе месяцев. Если пользователь выбирает 1, он печатает январь. У меня есть все месяцы в массиве, поэтому arr[0] = январь, но выбор 1 в раскрывающемся списке будет печатать «январь». В моем коде я продолжаю получать неправильный месяц, он всегда отстает. Я прочитал некоторую документацию по переключателю, но я думаю, что неправильно понял «выражение». Я пытаюсь использовать переключатель case, чтобы избежать множества операторов if.

function months() {
  monthText = document.getElementById("month");
  var monthNumber = document.getElementById("month_number").value;
  var monthsArr = ["January", "February", "March", "April", "May", "June", "July", "August", "September", " October", "November", "December"];

  switch (monthNumber) {
    //Januari
    case monthNumber == "1": 
    monthText = monthsArr[0];
    break;
    //Februari
    case monthNumber == "2": 
    monthText = monthsArr[1];
    break;
    //Mars
    case monthNumber == "3": 
    monthText = monthsArr[2];
    break;
    //April
    case monthNumber == "4": 
    monthText = monthsArr[3];
    break;
    //Maj
    case monthNumber == "5": 
    monthText = monthsArr[4]
    break;
    //Juni
    case monthNumber == "6": 
    monthText = monthsArr[5];
    break;
    //Juli
    case monthNumber == "7": 
    monthText = monthsArr[6];
    break;
    //Augusti
    case monthNumber == "8": 
    monthText = monthsArr[7];
    break;
    //Septembar
    case monthNumber == "9": 
    monthText = monthsArr[8];
    break;
    //Oktober
    case monthNumber == "10": 
    monthText = monthsArr[9];
    break;
    //November
    case monthNumber == "11": 
    monthText = monthsArr[10];
    break;
    //December
    case monthNumber == "12": 
    monthText = monthsArr[11];
    break;
    }

    monthText.value = monthsArr[monthNumber];
    console.log(monthsArr[monthNumber]);
}
<form>
  <fieldset>
    <select id="month_number" onchange="months()">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
    </select>
    <input type="text" id="month" value="" size="15" />
</fieldset>

switch должно быть основано на monthNumber, а выражения case должны быть case "11": и т. д.

Pointy 22.04.2022 20:09

MonthArr, как следует из названия, представляет собой массив. Включать нет смысла.

jonrsharpe 22.04.2022 20:11

Как выглядит ваш html? Как выбрать month_number? Это ввод, выбор и т. д.?

user1599011 22.04.2022 20:12

Вы говорите, что читали документацию по переключателям, но вместо того, чтобы делать простую демонстрацию, вы начинаете прямо с переключателя на 12 регистров. В порядке. Почему вы включаете monthArr? Эта переменная должна содержать значение для ваших случаев переключения: monthNumber. Но вы же читали документацию! Это одна линия!

Diego De Vita 22.04.2022 20:13
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
0
4
66
5
Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Операторы switch работают не так. Когда вы помещаете массив в свой оператор switch, вы сравниваете весь массив в каждом операторе case.

switch ([1, 2, 3]) {
  case monthNumber == "1": // evaluates to 'case true:'
    // since 'true' is not '[1, 2, 3]' this case-statement is ignored
  case [1, 2, 3]:
    // since '[1, 2, 3] == [1, 2, 3]' this case-statement is executed
}

Поэтому в своем операторе switch вы должны давать не monthsArr для проверки, а monthNumber:

switch (monthNumber) {
  case "6":
    monthText = monthsArr[5]
}

Кстати, я думаю, вы можете упростить свой полный переход примерно так:

monthText = monthsArr[Number(monthNumber) - 1]

Спасибо за ваш ответ и время! Я изменил его на использование monthNumber, но он все тот же! Я хочу аккуратно проверить пользовательский ввод, если переключатель не подходит для этого варианта использования, я не буду его использовать :)

SterlinkArcher 22.04.2022 20:21
switch (monthNumber) {
    case "1": 
    monthText = monthsArr[0];
    break;

...

Не используйте для этого переключатели, так как это медленно. просто используйте массив имен месяцев и используйте индексацию для месяца

let monthNumber = Number(document.getElementById("month_number").value);
let monthName = ["January", "February", "March", "April", "May", "June", "July", "August", "September", " October", "November", "December"][(monthNumber - 1) % 12];

console.log(monthName);

Обратите внимание, что одно из ваших выражений case должно соответствовать значению, которое вы включаете, чтобы что-то произошло.

Поскольку вы используете такие предложения, как case monthNumber == "4": вместо значений например case "4": для ваших случаев (что нормально), вы хотите, чтобы ваш случай срабатывал, когда ваше предложение оценивается как true, поэтому тот — это значение, которое вы должны включить:

switch(true) {
//...

Это должно работать без необходимости изменять остальную часть вашего кода.

Спасибо, что объяснили, как это работает! Благодаря всем советам, которые я получил здесь, я понимаю, что этот чехол был не таким умным, чтобы использовать его здесь :)

SterlinkArcher 22.04.2022 20:29
Ответ принят как подходящий

Вы, кажется, используете его неправильно. В части переключателя должен идти номер месяца, и в случае части вы не должны сравнивать, как делаете. Правильный код будет примерно таким:

switch (monthNumber) {
    //January
    case 1: 
     monthText = monthsArr[0];
     break;
   
   // February
   case 2: 
    monthText = monthsArr[1];
    break;

  // ... so on
}

Вы можете увидеть аналогичный пример здесь: https://www.w3schools.com/js/js_switch.asp

Также обратите внимание, что эту проблему можно решить и лучше. Например:

monthText = monthsArr[monthNumber - 1]; 
/* Let's say user selects 1, so this statement would evaluate monthNumber - 
 1 first which would be 1 - 1 = 0 and returns monthsArr[0] which is actually January.*/

Спасибо! Это фактически решило мою проблему, я выбросил текст и научился правильно его использовать по пути: D

SterlinkArcher 22.04.2022 20:30

Другие вопросы по теме