Блог

Я работаю над изучением JS и в настоящее время пытаюсь создать коммутатор, который допускает прописные или строчные буквы. Плоды в моих случаях — это то, что я пытаюсь разрешить вводить. Например, если введено «Pineapple» или «pineapple», оно принимает оба. Сейчас он принимает только нижний регистр, и я не уверен, почему.

Вот мой код:

 function favDrinks() {
var text;
var drinks = document.getElementById("inputbox").value;

//Switch(expression) to select code blocks to be executed.
switch (drinks) {
    //Cases to be tested against the expression.
    case "Pineapple", "pineapple":
        text = "Pineapple Rum Punch";
        break;
    case "Apple", "apple":
        text = "Apple Whiskey Sour";
        //If case matches, code will execute, and break will end switch block.
        break;
    case "Lime", "lime":
        text = "Tequila Lime Mojito Cocktail";
        break;
    case "Cherry", "cherry":
        text = "Cherry Lemonde Cocktail";
        break;
    case "Orange", "orange":
        text = "Orange Crush";
        break;
    case "Cranberry", "cranberry":
        toext = "Cranberry Cosmopolitan";
        break;
    case "Banana", "banana":
        text = "Dirty Banana Cocktail";
        break;
    case "Watermelon", "watermelon":
        text = "Watermelon Sangria";
        break;
    //If none of the cases match, default text is ran
    default: 
    text = "There are no drinks with that selection."
}
document.getElementById("favdrinkresult").innerHTML = text;
 

}

Я только что нашел решение, и теперь оно работает в обоих направлениях.

Я просто добавил еще один регистр прямо под каждым регистром. Например:

 switch (drinks) {
    //Cases to be tested against the expression.
    case "Pineapple":
    case "pineapple":
        text = "Pineapple Rum Punch";
        break;
 

Хотя вы могли бы вызвать toLowerCase выражение, переданное в switch первый:

 switch (drinks.toLowerCase()) {
    //Cases to be tested against the expression.
    case "pineapple":
        text = "Pineapple Rum Punch";
        break;
 

Вам следует настоятельно рассмотреть возможность использования объекта вместо этого, он будет намного более кратким, менее подверженным ошибкам и более простым для чтения и записи:

 const drinkNames = {
  pineapple: "Pineapple Rum Punch",
  apple: "Apple Whiskey Sour",
  // ...
};
const input = document.getElementById("inputbox");
const result = document.getElementById("favdrinkresult");
function favDrinks() {
  const inputValue = input.value;
  const text = drinkNames[inputValue.toLowerCase()];
  result.textContent = text || "There are no drinks with that selection.";
}
 

(также не забывайте использовать .textContent при настройке только для текста — использовать innerHTML , в частности, при настройке или извлечении HTML-разметки; .textContent в противном случае это быстрее, безопаснее и более семантически уместно)