Question

我正在创建一个小的 HTML 页面，该页面根据您从 combobox 中选择的城市来计算电话价格（第一个组合是您所在的城市'正在呼叫，另一个是您要呼叫的城市。

现在由于某种原因，控制台指示未声明最后一行中的结果变量。

此外，我还在尝试寻找一种更简单的方法来替换 IF语句（我在switch / case中进行了尝试）。由于某些原因，确定按钮会从Chrome打开打印机选项。

计算器功能

function PriceCalc() {
  var time = Number(document.getElementById("time").value);
  var caller = Number(document.getElementById("Caller").value);
  var receiver = Number(document.getElementById("Receiver").value);
  var result = 0;

  if (caller == "1" && receiver == "6") {
    result = time * 1.90;
  } else if (caller == "1" && receiver == "7") {
    result = time * 2.90;

  } else if (caller == "1" && receiver == "8") {
    result = time * 1.65;

  } else if (caller == "2" && receiver == "5") {
    result = time * 2.70;

  } else if (caller == "3" && receiver == "1") {
    result = time * 2.75;


  }
  document.getElementById("result").innerHTML = " = " + result;
}

<!DOCTYPE html>
<html>



<head>
  <title></title>
  <script type="text/javascript" src="telzir.js"></script>
  <link href="telzir.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div id="centre">
    <h1>Price Calculator</h1>
    <form>
      <input id="time" placeholder="Minutes Spended">

      <select id="Caller">
        <option value="1">São Paulo</option>
        <option value="2">Ribeirão Preto</option>
        <option value="3">São José dos Campos</option>
        <option value="4">Presidente Prudente</option>
      </select>

      <select id="Receiver">
        <option value="5">São Paulo</option>
        <option value="6">Ribeirão Preto</option>
        <option value="7">São José dos Campos</option>
        <option value="8">Presidente Prudente</option>
      </select>
      <input id="name " type="button" value="Ok" onclick="PriceCalc()">

      <input id="reset" type="reset" value="Reset" />

    </form>
    <h1 id="result"> = </h1>
  </div>

</body>


</html>

Answer 1

当我在Chrome 68.0.3440.106的计算机上运行此命令时，控制台不会指示未声明结果变量，并且按“确定”按钮不会弹出打印对话框。可能还有其他变量在起作用-也许您做了一些更改后没有完全刷新页面（请参见https://en.wikipedia.org/wiki/Wikipedia:Bypass_your_cache）。

关于寻找一种表达应用程序逻辑的简单方法，以下是一些建议：

考虑计算数据的来源。如果基于简单的规则（例如两个位置之间的距离），则可以在每个位置存储一条信息，然后使用该信息计算成本。这样就不需要if语句，switch语句或任何其他条件逻辑。
您可以创建一个数据结构，为两个位置的每组存储乘数。在Javascript中，您可以将对象用作字典：

function calculateCallCost(minutesSpent, caller, receiver) {
  // This is a dictionary that maps from callers to dictionaries
  // of receivers to multipliers
  // If you haven't used dictionaries before, here's one explanation: https://learn.co/lessons/javascript-objects
  const CALLER_TO_RECEIVER_TO_MULTIPLIER = {};
  // Here we're creating a new dictionary for caller "São Paulo":
  CALLER_TO_RECEIVER_TO_MULTIPLIER["São Paulo"] = {};
  // And now we're setting the multiplier for caller "São Paulo" and receiver "Ribeirão Preto" to 1.9:
  CALLER_TO_RECEIVER_TO_MULTIPLIER["São Paulo"]["Ribeirão Preto"] = 1.9;
  CALLER_TO_RECEIVER_TO_MULTIPLIER["São Paulo"]["São José dos Campos"] = 2.9;
  CALLER_TO_RECEIVER_TO_MULTIPLIER["São Paulo"]["Presidente Prudente"] = 1.65;
  // Now we're creating a dictionary for caller "2"
  // Here we use a shortcut to set the multipliers as we create the dictionary:
  CALLER_TO_RECEIVER_TO_MULTIPLIER["Ribeirão Preto"] = {
    "São Paulo": 2.7
  };
  // If we wanted to, we could have done the same for caller "1":
  // CALLER_TO_RECEIVER_TO_MULTIPLIER["1"] = {"6": 1.9, "7": 2.9, "8": 1.65}
  CALLER_TO_RECEIVER_TO_MULTIPLIER["São José dos Campos"] = {
    "São Paulo": 2.75
  };

  let receiverToMultiplier = CALLER_TO_RECEIVER_TO_MULTIPLIER[caller];
  if (receiverToMultiplier !== undefined) {
    let multiplier = receiverToMultiplier[receiver];
    if (multiplier !== undefined) {
      return multiplier * minutesSpent;
    }
  }
  let multiplier = receiverToMultiplier[receiver];
  if (multiplier === undefined) {
    return 0;
  }
}

function PriceCalc() {
  var time = Number(document.getElementById("time").value);
  var caller = document.getElementById("Caller").value;
  var receiver = document.getElementById("Receiver").value;

  let cost = calculateCallCost(time, caller, receiver);
  document.getElementById("result").innerHTML = " = " + cost;
}

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script type="text/javascript" src="telzir.js"></script>
  <link href="telzir.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div id="centre">
    <h1>Price Calculator</h1>
    <form>
      <input id="time" placeholder="Minutes Spended">

      <!-- Note that I've changed the values to strings. You don't need to do this, but I found it easier to read. It does make typos more of an issue, and if you're worried about that in your code, you could store the strings in variables. -->
      <select id="Caller">
        <option value="São Paulo">São Paulo</option>
        <option value="Ribeirão Preto">Ribeirão Preto</option>
        <option value="São José dos Campos">São José dos Campos</option>
        <option value="Presidente Prudente">Presidente Prudente</option>
      </select>

      <select id="Receiver">
        <option value="São Paulo">São Paulo</option>
        <option value="Ribeirão Preto">Ribeirão Preto</option>
        <option value="São José dos Campos">São José dos Campos</option>
        <option value="Presidente Prudente">Presidente Prudente</option>
      </select>
      <input id="name " type="button" value="Ok" onclick="PriceCalc()">

      <input id="reset" type="reset" value="Reset" />

    </form>
    <h1 id="result"> = </h1>
  </div>

</body>


</html>

当然，您可以对代码进行许多其他方法和许多增量改进，具体取决于您的目标和拥有的时间，但这也许会使您入门。祝你好运：）

将2个组合框值链接到If语句

1 个答案: