javascript - 我如何根据我在 JavaScript 中分配的一系列字符串来验证用户输入？

Question

我是 JavaScript 的新手，所以请多多包涵。

所以我想创建多个优惠券代码，每个优惠券代码都有一个特定的可兑换金额。如果用户应该购买优惠券并在获得优惠券代码后将其输入文本字段，我如何获取 JavaScript 来验证用户优惠券代码并确认兑换的金额并将其打印出来？就像兑换亚马逊礼品卡一样!

我希望所有这些都在我创建的一个简单的 HTML 文件中完成。

由于我刚刚开始使用 JS，我似乎无法靠自己实现这一目标。

例如我在字符串中有几个优惠券代码:

var voucher1 = AC60";
var voucher2= 'DC60';
var voucher3= 'RC60';
var voucher4= 'XC60';
var voucher5= 'YC60';
var voucher6= 'WC60';
var voucher7= 'ZC60';

我如何为每个附加货币值(value)并验证用户输入以确认哪个已兑换并打印出值(value)，就像兑换亚马逊礼品卡一样？

Answer 1

您正在寻找的是 Object或 Map .这些数据结构允许您以 key-value 的形式将货币值(value)附加到优惠券代码。 对(其中凭证代码是键，货币值是值)。

一个简单的例子可以这样工作:

// This is a simple object literal of keys and values
const vouchers = {
  AC60: 100,
  DC60: 20,
  RC60: 35,
  XC60: 45,
  YC60: 80,
  WC60: 10,
  ZC60: 200
};

// This function will update the ouput <div> with the voucher amount
// or indicate an unknown voucher was input
function getVoucherValue(event) {
  const key = input.value;      // Stores the value of the input
  const value = vouchers[key];  // Looks up the key in the object

  // If the key is valid, update the output <div> with the monetary value
  // Else the key is undefined, update the output <div> with an error message
  if (vouchers[key]) {
    output.textContent = vouchers[key];
  } else {
    output.textContent = "Invalid voucher"
  }
}

// Whenever the button is clicked, run the getVoucherValue() function
button.addEventListener("click", getVoucherValue);

<input id="input">
<button id="button">Get Voucher Value</button>
<div id="output"></div>