时间戳

首页 > 解决方案 > 将 2 个组合框值链接到 If 语句

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

问题描述

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

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

此外，我试图找到一种更简单的方法来替换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>

标签： javascripthtmlif-statementcombobox

解决方案

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

至于找到一种更简单的方式来表达你的应用程序的逻辑，这里有一些建议：

  1. 想想计算的数据来自哪里。如果它基于一个简单的规则，例如两个位置之间的距离，您可以为每个位置存储一条信息，然后使用该信息计算成本。那么您就不需要 if 语句、switch 语句或任何其他条件逻辑。

  2. 您可以创建一个数据结构来存储每组两个位置的乘数。在 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>

当然，根据你的目标和你有多少时间，你可以对代码进行许多其他方法和许多增量改进，但也许这会让你开始。祝你好运 ：）

推荐阅读