在 Javascript 中使用多个选项进行计算
Doing Calculations with multiple options in Javascript
我对 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>
通过在 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>
我建议您使用 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 很陌生,已经开始做简单的计算,但是 运行 进入了 <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>
通过在 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>
我建议您使用 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>