JS自动计算多个字段,共计

时间:2017-11-27 14:35:12

标签: javascript

我已经看过用于自动计算总数的js的多个示例,但是没有找到任何适用于我的具有计算不同数字的字段以组合以创建总计的情况。以下是我的代码,您可以了解更多。

<html>
<head>
<meta charset="utf-8">
<title>Calculator</title>

<script language="javascript">
   function Calc(className){
      var elements = document.getElementsByClassName(className);
      var totalCost = 0;
	  
      for(var i = 0; i < elements.length; i++){
         totalCost += parseInt(elements[i].value);
      }
      
      document.tickets.totalCost.value = '£' + totalCost;

  }
</script>

</head>
<body>
<form name="tickets" id="tickets">

<!--FIRST CLASS that takes the value entered and * by the ticket price for an adult. Price is £18 * Number of Tickets -->
	<label for="noAdults"> Number of Adults</label>
	<select name="noAdults" id="noAdults" class="adultTotal" onclick="Calc('adultTotal')">

		<option value="0" >0</option>
		<option value="1" >1</option>
		<option value="2" >2</option>
		<option value="3" >3</option>
		<option value="4" >4</option>
		<option value="5" >5</option>
		<option value="6" >6</option>
		<option value="7" >7</option>
		<option value="8" >8</option>
	</select>
	<label for="pricing"> X £18</label><br><br>
	
<!--Not class as children under 2 are not charged-->

	<label for="childUnder2"> Number of Children aged 2 or less </label>
	<select name="childUnder2" id="childUnder2">

		<option value="0" >0</option>
		<option value="1" >1</option>
		<option value="2" >2</option>
		<option value="3" >3</option>
		<option value="4" >4</option>
		<option value="5" >5</option>
		<option value="6" >6</option>
		<option value="7" >7</option>
		<option value="8" >8</option>
	</select>https://stackoverflow.com/questions/ask?title=auto%20calculate%20values%20onclick#
	<label for="pricing"> X £FREE</label><br><br>
	
<!--SECOND CLASS that takes the value entered and * by the ticket price for a child ages 3-10. Price is £10 * Number of Tickets -->	
	<label for="childBox1"> Number of Children aged 3-10</label>
	<select name="childBox1" id="childBox1" class="childBox1" onclick="Calc('childBox1')">

		<option value="0" >0</option>
		<option value="1" >1</option>
		<option value="2" >2</option>
		<option value="3" >3</option>
		<option value="4" >4</option>
		<option value="5" >5</option>
		<option value="6" >6</option>
		<option value="7" >7</option>
		<option value="8" >8</option>
	</select>
	<label for="pricing"> X £10</label><br><br>
	
<!--EDIT CLASS that takes the value entered and * by the ticket price for a child ages 11-16. Price is £13 * Number of Tickets -->
	<label for="childBox2"> Number of Children aged 11-16</label>
	<select name="childBox2" id="childBox2" class="childBox2" onclick="Calc('childBox2')">

		<option value="0" >0</option>
		<option value="1" >1</option>
		<option value="2" >2</option>
		<option value="3" >3</option>
		<option value="4" >4</option>
		<option value="5" >5</option>
		<option value="6" >6</option>
		<option value="7" >7</option>
		<option value="8" >8</option>
	</select>
	<label for="pricing"> X £13</label><br><br>

<!--If checked, the priced is double from that of a single ticket. Total price is * 2. -->
	<input type="checkbox" name="rtnJourney" id="rtnJourney" value="2" onclick="Calc('rtnJourney')">Return Journey - If unchecked, price is halved<br>
	
Total: <input type="text" id="totalCost" name="totalCost">

</form>
</body></html>

现在我理解为什么上面的JS代码不起作用了,我从网上的一个例子中获取了这个,它从CLASS中获取了每个值并将它们组合在一起但是因为我对每个条目都有不同的乘法值我试图修改它哪个没锻炼。我不知道如何做我需要它来计算总数。另请注意,它还没有添加值,现在我只想让它计算所有字段的总数。

p.s我真的不熟悉JS,我非常感谢给予的任何帮助。

0 个答案:

没有答案