在 Javascript 中使用多个选项进行计算

Question

我对 Javascript 很陌生，已经开始做简单的计算，但是运行进入了 <select> 的障碍。

我希望代码获取用户在下拉菜单中 select 编辑的内容，然后乘以 "How many nights?" 框中的数字。答案将显示在下面的文本框中。 select 菜单中的选项都与价格相关联。

< script language = "javascript" >
  function calculate() {
    var val1 = parseInt(document.getElementById("Nights").value);
    var val1 = parseInt(document.getElementById("House").value);
    var House1 = 100;
    var House2 = 175;
    var House3 = 150;
    var House4 = 135;
    var House5 = 150;
    var House6 = 120;
    var House7 = 180;
    var House8 = 120;
    var House9 = 80;
    var House10 = 105;

    var ansD = document.getElementById("answer");
    ansD.value = House * Nights;
  }
} < /script>

<html>

<head>
  <title>Calculate cost</title>



</head>

<body>
  <select required class="textfield" name="House" id="House">
    <option value="">None</option>
    <option value="House1">House 1</option>
    <option value="House2">House 2</option>
    <option value="House3">House 3</option>
    <option value="House4">House 4</option>
    <option value="House5">House 5</option>
    <option value="House6">House 6</option>
    <option value="House7">House 7</option>
    <option value="House8">House 8</option>
    <option value="House9">House 9</option>
    <option value="House10">House 10</option>
  </select>
  <br />
  <br />How many nights?
  <input type="text" id="Nights" name="Nights" value="1" />

  <input type="button" name="Submit" value="Cost" onclick="javascript:addNumbers()" />
  <br />
  <br />Your stay will cost £
  <input type="text" id="answer" name="answer" value="" />
</body>

</html>

Answer 1

通过在 select 下拉列表中设置房屋的价值，您可以帮助自己很多。可以看到javascript部分大大减少了，把值加在一起其实很简单

此外，重要的是您的按钮不是提交类型，因为它随后会提交您的脚本，而且您不会看到计算函数的结果 ;)

function calculate() {
  var houseEl = document.getElementById('houseType'),
      nightEl = document.getElementById('nightsCount'),
      resultEl = document.getElementById('result');
  
  if (houseEl.selectedIndex < 0 || parseInt(nightEl.value) < 0) {
    resultEl.innerHTML = 'n/a';
    return;
  }
  resultEl.innerHTML = parseInt(houseEl.options[houseEl.selectedIndex].value) * parseInt(nightEl.value);
}

window.addEventListener('load', function() {
  document.getElementById('btnCalculate').addEventListener('click', calculate);
});

<select id="houseType">
  <option value="0">None</option>
  <option value="100">House 1</option>
  <option value="150">House 2</option>
</select>
<input type="number" min="1" value="1" id="nightsCount" />
<button type="button" id="btnCalculate">Calculate</button>
<div>
  The total amount for your stay would be <span id="result"></span> €
</div>

Answer 2

我建议您使用 Object 来保持 "key"-"value" 对。

a 是一个 Object，它包含 House1、House2 等键和作为值的价格. a[val2]会给你一个酒店住一晚的价格。

if None 值（或其他在 Map 中不可用的值）来自表单， isNaN() 检查将给出 true 并且将打印出 No price 消息。

<html>
<head>
  <title>Calculate cost</title>

<script language = "javascript">
  function calculate() {
    var val1 = parseInt(document.getElementById("Nights").value);
    var val2 = document.getElementById("House").value;
    var a={};
    var prices = [ 100, 175, 150, 135, 150, 120, 180, 120, 80, 105 ];
    for (var i = 1; i < 11; i++)
    {
     a["House"+i] = prices[i];
    }

    var ansD = document.getElementById("answer");
    if (isNaN(a[val2]))
      ansD.value="No price!";
    else
      ansD.value = val1 * a[val2];
  }
</script>

</head>

<body>
  <select required class="textfield" name="House" id="House">
    <option value="">None</option>
    <option value="House1">House 1</option>
    <option value="House2">House 2</option>
    <option value="House3">House 3</option>
    <option value="House4">House 4</option>
    <option value="House5">House 5</option>
    <option value="House6">House 6</option>
    <option value="House7">House 7</option>
    <option value="House8">House 8</option>
    <option value="House9">House 9</option>
    <option value="House10">House 10</option>
  </select>
  <br />
  <br />How many nights?
  <input type="text" id="Nights" name="Nights" value="1" />

  <input type="button" name="Submit" value="Cost" onclick="calculate()" />
  <br />
  <br />Your stay will cost £
  <input type="text" id="answer" name="answer" value="" />
</body>

</html>

在 Javascript 中使用多个选项进行计算

Doing Calculations with multiple options in Javascript

javascript

html

select

option