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

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

javascript html select

在Javascript中使用多个选项进行计算,javascript,html,select,option,Javascript,Html,Select,Option,我对Javascript非常陌生，开始做简单的计算，但遇到了的障碍我希望代码能够获得用户在下拉菜单中选择的内容，并将“多少夜？”框中的数字相乘。答案将显示在下面的文本框中。选择菜单中的所有选项都与价格挂钩函数计算（）{ var val1=parseInt（document.getElementById（“Nights”）.value）； var val1=parseInt（document.getElementById（“House”）.value）； var=1=100； var Ho

我对Javascript非常陌生，开始做简单的计算，但遇到了

的障碍

我希望代码能够获得用户在下拉菜单中选择的内容，并将“多少夜？”框中的数字相乘。答案将显示在下面的文本框中。选择菜单中的所有选项都与价格挂钩


计算成本
没有一个
1号楼
房子2
第三栋
第四栋
第五栋
6号楼
7号楼
8号楼
第9栋
10号楼



有多少个晚上？



您的住宿费用为%

通过在“选择”下拉列表中设置房屋的值，您可以自助很多。您可以看到，javascript部分大大减少了，而且将这些值相加实际上非常简单

此外，重要的是，您的按钮不是submit类型，因为它会提交您的脚本，而且，您不会看到calculate函数的结果；）

函数计算（）{
var houseEl=document.getElementById（'houseType'），
nightEl=document.getElementById（'NightScont'），
resultEl=document.getElementById（'result'）；
if（houseEl.selectedIndex<0 | | parseInt（nightEl.value）<0）{
resultEl.innerHTML='n/a'；
返回；
}
resultEl.innerHTML=parseInt（houseEl.options[houseEl.selectedIndex].value）*parseInt（nightEl.value）；
}
addEventListener（'load'，function（））{
document.getElementById（'btnCalCalculate'）。addEventListener（'click'，calculate'）；
});

没有一个
1号楼
房子2
算计
您的住宿总金额为€
我建议您使用保持“键”-“值”对的对象
a
是一个对象，它包含House1、House2和prices等键作为值。
a[val2]
将为您提供在酒店住宿一晚的价格
如果None值（或地图值中不可用的其他值）来自表单，
isNaN（）
<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>


计算成本
函数计算（）{
var val1=parseInt（document.getElementById（“Nights”）.value）；
var val2=document.getElementById（“房屋”）值；
变量a={}；
风险价值价格=[10017515013515012018012080105]；
对于（变量i=1；i<11；i++）
{
a[“房屋”+i]=价格[i]；
}
var ansD=document.getElementById（“答案”）；
if（isNaN（a[val2]））
ansD.value=“没有价格！”；
其他的
ansD.value=val1*a[val2]；
}
没有一个
1号楼
房子2
第三栋
第四栋
第五栋
6号楼
7号楼
8号楼
第9栋
10号楼



有多少个晚上？



您的住宿费用为%
addnumbers（）
应替换为calculate
，val1
发生2次，使用map
：让自己更容易一点，并将选项的价值表示为每晚的实际成本，将来可能会更灵活。所以NoneHouse 1
。。。然后，您可以从选择的选项中读取价格，并将其与Nights TextBoxThank的parseInt值相乘！这无疑对我有所帮助，但将Javascript放入外部文件会造成问题。我目前正在使用此代码链接它`@JohnField81我很高兴这对您有所帮助，但是您能给我一些关于您得到的错误的更多信息吗（是控制台中提到了什么，还是加载文件时出错）？