JavaScript - 从 2 个下拉菜单中计算它们之间的值

标签 javascript jquery ajax drop-down-menu calculator

**我试图从头开始制作一个菜单，允许您计算服务的价格，价格等于第一个下拉列表“直到第二个”，就像应该添加之间的每个价格一样。我的代码:

https://www.codecademy.com/JoaquimTD/codebits/N5vsNA 

var boosting_prices = new Array();
boosting_prices["b5"] = 5;
boosting_prices["b4"] = 5;
boosting_prices["b3"] = 5;
boosting_prices["b2"] = 7.5;
boosting_prices["b1"] = 10;
boosting_prices["s5"] = 10;
boosting_prices["s4"] = 10;
boosting_prices["s3"] = 10;
boosting_prices["s2"] = 12;
boosting_prices["s1"] = 12.5;
boosting_prices["g5"] = 12.5;
boosting_prices["g4"] = 12.5;
boosting_prices["g3"] = 12.5;
boosting_prices["g2"] = 15;
boosting_prices["g1"] = 17.5;
boosting_prices["p5"] = 20;
boosting_prices["p4"] = 20;
boosting_prices["p3"] = 20;
boosting_prices["p2"] = 22.5;
boosting_prices["p1"] = 25;
boosting_prices["d5"] = 30;
boosting_prices["d4"] = 40;
boosting_prices["d3"] = 55;
boosting_prices["d2"] = 80;
boosting_prices["d1"] = 160;

function getBoostPrice(){
    var yourLeague = document.getElementById("yourLeague").selectedIndex;
    var desiredLeague = document.getElementById("desiredLeague").selectedIndex;
    for ( var i = boosting_price[yourLeague].length; i =< boosting_price[desiredLeague].length; i++) {
        var totalPrice = 0;
        totalPrice += boosting_price[i];
    }
    var totalCalc = document.getElementById('totalCalc');
    totalCalc.innerHTML = totalPrice;
};
<!DOCTYPE html>
<html>
<head>
	<link rel='stylesheet' href='style.css'/>
	<script src='script.js'></script>
</head>
<body>
<form action=" " id="boostingForm">
	<div class="boostColumn" id="boostColumn">
		<label>Your League</label>
			<select id="yourLeague">
				<option value="Bronze V" id="b5" value="5">Bronze V</option>
				<option value="Bronze IV" id="b4" value="5">Bronze IV</option>
				<option value="Bronze III" id="b3" value="5">Bronze III</option>
				<option value="Bronze II" id="b2" value="7.5">Bronze II</option>
				<option value="Bronze I" id="b1" value="10">Bronze I</option>
				<option value="Silver V" id="s5" value="10">Silver V</option>
				<option value="Silver IV" id="s4" value="10">Silver IV</option>
				<option value="Silver III" id="s3" value="10">Silver III</option>
				<option value="Silver II" id="s2" value="12">>Silver II</option>
				<option value="Silver I" id="s1" value="12.5">Silver I</option>
				<option value="Gold V" id="g5" value="12.5">Gold V</option>
				<option value="Gold IV" id="g4" value="12.5">Gold IV</option>
				<option value="Gold III" id="g3" value="12.5">Gold III</option>
				<option value="Gold II" id="g2" value="15">Gold II</option>
				<option value="Gold I" id="g1" value="17.5">Gold I</option>
				<option value="Platinum V" id="p5" value="20">Platinum V</option>
				<option value="Platinum IV" id="p4" value="20">Platinum IV</option>
				<option value="Platinum III" id="p2" value="22.5">Platinum III</option>
				<option value="Platinum II" id="p1" value="25">Platinum II</option>
				<option value="Platinum I" id="p1" value="25">Platinum I</option>
				<option value="Diamond V" id="d5" value="30">Diamond V</option>
				<option value="Diamond IV" id="d4" value="40">Diamond IV</option>
				<option value="Diamond III" id="d3" value="55">Diamond III</option>
				<option value="Diamond II" id="d2" value="80">Diamond II</option>
				<option value="Diamond I" id="d1" value="160">Diamond I</option>
			</select>
	</div>
	<div class="boostColumn" id="boostColumn2">
		<label>Desired League</label>
			<select id="desiredLeague">
				<option value="Bronze V" id="b5" value="5">Bronze V</option>
				<option value="Bronze IV" id="b4" value="5">Bronze IV</option>
				<option value="Bronze III" id="b3" value="5">Bronze III</option>
				<option value="Bronze II" id="b2" value="7.5">Bronze II</option>
				<option value="Bronze I" id="b1" value="10">Bronze I</option>
				<option value="Silver V" id="s5" value="10">Silver V</option>
				<option value="Silver IV" id="s4" value="10">Silver IV</option>
				<option value="Silver III" id="s3" value="10">Silver III</option>
				<option value="Silver II" id="s2" value="12">>Silver II</option>
				<option value="Silver I" id="s1" value="12.5">Silver I</option>
				<option value="Gold V" id="g5" value="12.5">Gold V</option>
				<option value="Gold IV" id="g4" value="12.5">Gold IV</option>
				<option value="Gold III" id="g3" value="12.5">Gold III</option>
				<option value="Gold II" id="g2" value="15">Gold II</option>
				<option value="Gold I" id="g1" value="17.5">Gold I</option>
				<option value="Platinum V" id="p5" value="20">Platinum V</option>
				<option value="Platinum IV" id="p4" value="20">Platinum IV</option>
				<option value="Platinum III" id="p2" value="22.5">Platinum III</option>
				<option value="Platinum II" id="p1" value="25">Platinum II</option>
				<option value="Platinum I" id="p1" value="25">Platinum I</option>
				<option value="Diamond V" id="d5" value="30">Diamond V</option>
				<option value="Diamond IV" id="d4" value="40">Diamond IV</option>
				<option value="Diamond III" id="d3" value="55">Diamond III</option>
				<option value="Diamond II" id="d2" value="80">Diamond II</option>
				<option value="Diamond I" id="d1" value="160">Diamond I</option>
			</select>
	</div>
	<p id="totalCal">TOTAL</p>
	<input type="submit" class="orderButton" id="submitOrder" value="Order Now!" onclick="getBoostingPrice();">
</body>
</html>

这个想法是根据客户想要的分区数量来计算总价。我尝试使用 JavaScript 数组来获取价格，并使用 id 来识别它们。就像我在:boosting_prices[yourLeague.id] 中所做的那样。

我可以使用 jQuery、JavaScript、PHP 和 HTML。**

最佳答案

您的代码中有很多错误，但我明白您的想法。

HTML 错误:

  • 您为每个选项定义了多个值，这是错误的
  • 您正在使用<input type="submit">而不是<input type="button">仅当您要将数据发布到服务器时才使用提交
  • 您正在调用未定义的 JavaScript 函数 getBoostingPrice js 文件有 getBoostPrice

这是工作代码:

function getBoostingPrice() {
  var yourLeague = document.getElementById("yourLeague").selectedIndex;
  var desiredLeague = document.getElementById("desiredLeague").selectedIndex;
  var options = document.getElementById("yourLeague").options;

  var totalPrice = 0;
  for (var i = yourLeague; i <= desiredLeague; i++) {
    totalPrice += parseInt(options[i].value);
  }
  var totalCalc = document.getElementById('totalCalc');
  totalCalc.innerHTML = totalPrice.toString();
};
<!DOCTYPE html>
<html>

<head>

  <script src='script.js'></script>
</head>

<body>
  <form action=" " id="boostingForm">
    <div class="boostColumn" id="boostColumn">
      <label>Your League</label>
      <select id="yourLeague">
        <option id="b5" value="5">Bronze V</option>
        <option id="b4" value="5">Bronze IV</option>
        <option id="b3" value="5">Bronze III</option>
        <option id="b2" value="7.5">Bronze II</option>
        <option id="b1" value="10">Bronze I</option>
        <option id="s5" value="10">Silver V</option>
        <option id="s4" value="10">Silver IV</option>
        <option id="s3" value="10">Silver III</option>
        <option id="s2" value="12">Silver II</option>
        <option id="s1" value="12.5">Silver I</option>
        <option id="g5" value="12.5">Gold V</option>
        <option id="g4" value="12.5">Gold IV</option>
        <option id="g3" value="12.5">Gold III</option>
        <option id="g2" value="15">Gold II</option>
        <option id="g1" value="17.5">Gold I</option>
        <option id="p5" value="20">Platinum V</option>
        <option id="p4" value="20">Platinum IV</option>
        <option id="p2" value="22.5">Platinum III</option>
        <option id="p1" value="25">Platinum II</option>
        <option id="p1" value="25">Platinum I</option>
        <option id="d5" value="30">Diamond V</option>
        <option id="d4" value="40">Diamond IV</option>
        <option id="d3" value="55">Diamond III</option>
        <option id="d2" value="80">Diamond II</option>
        <option id="d1" value="160">Diamond I</option>
      </select>
    </div>
    <div class="boostColumn" id="boostColumn2">
      <label>Desired League</label>
      <select id="desiredLeague">
        <option id="b5" value="5">Bronze V</option>
        <option id="b4" value="5">Bronze IV</option>
        <option id="b3" value="5">Bronze III</option>
        <option id="b2" value="7.5">Bronze II</option>
        <option id="b1" value="10">Bronze I</option>
        <option id="s5" value="10">Silver V</option>
        <option id="s4" value="10">Silver IV</option>
        <option id="s3" value="10">Silver III</option>
        <option id="s2" value="12">Silver II</option>
        <option id="s1" value="12.5">Silver I</option>
        <option id="g5" value="12.5">Gold V</option>
        <option id="g4" value="12.5">Gold IV</option>
        <option id="g3" value="12.5">Gold III</option>
        <option id="g2" value="15">Gold II</option>
        <option id="g1" value="17.5">Gold I</option>
        <option id="p5" value="20">Platinum V</option>
        <option id="p4" value="20">Platinum IV</option>
        <option id="p2" value="22.5">Platinum III</option>
        <option id="p1" value="25">Platinum II</option>
        <option id="p1" value="25">Platinum I</option>
        <option id="d5" value="30">Diamond V</option>
        <option id="d4" value="40">Diamond IV</option>
        <option id="d3" value="55">Diamond III</option>
        <option id="d2" value="80">Diamond II</option>
        <option id="d1" value="160">Diamond I</option>
      </select>
    </div>
    TOTAL: <span id="totalCalc"></span>
    <br/>
    <input type="button" class="orderButton" id="submitOrder" value="Order Now!" onclick="getBoostingPrice();">
</body>

</html>

关于JavaScript - 从 2 个下拉菜单中计算它们之间的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32448918/

上一篇：javascript - jPlayer 运行轨道名称的 onclick 函数

下一篇：javascript - 哪里是存储非代码文件(例如 mp3)以便使用 codepen 进行 javascript 测试的好地方？

相关文章：

javascript - 将 Bootstrap 工具提示与 SVG 对象一起使用 - 尽管指定了容器但不显示

javascript - 具有多个背景图像的动画

jquery - 在保持相对的同时向下滚动时使侧边栏变粘

php - AJAX 调用 PHP 查询不工作

javascript - Laravel pjax - 设置

javascript - 比较嵌套对象中的值

javascript - 等待所有不同的 promise 完成 nodejs(异步等待)

javascript - 将 Html 从字符串解析为文档

JQuery 将附加数据添加到新选项

javascript - 在rails中使用远程以ajax渲染形式执行脚本

©2024 IT工具网  联系我们