Question

我对Javascript很陌生并且已经开始进行简单的计算，但是遇到了<select>的障碍。

我想让代码获取用户在下拉菜单中选择的内容并将数字乘以＆＃34;多少个晚上？＆＃34;框。答案将显示在下面的文本框中。选择菜单中的选项都与价格挂钩。

＆＃13;

< 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>

＆＃13;

<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>

＆＃13;

Answer 1

通过设置选择下拉列表中的房屋价值，您可以自己帮助很多。你可以看到javascript部分大大减少了，实际上很容易将值加在一起

此外，重要的是您的按钮不是提交类型，因为它会提交您的脚本，而且，您还没有看到计算功能的结果;）

＆＃13;

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);
});

＆＃13;

<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>

＆＃13;

Answer 2

我建议你使用Object来保持“关键” - “价值”对。

a是Object，它包含 House1 ， House2 和价格等值。 a[val2]会给你在酒店住一晚的价格。

如果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中使用多个选项进行计算

2 个答案: