JavaScript - 从 2 个下拉菜单中计算它们之间的值
JavaScript - Calculate from 2 dropdown menus the value between them
**我正在尝试从头开始制作一个菜单，让您可以计算服务的价格，价格等于第一个下拉列表 "until the second"，就像应该添加之间的每个价格一样。我的代码：
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"> 仅当您想要 post 您的数据到服务器时才使用提交
- 您正在调用未定义的 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>
**我正在尝试从头开始制作一个菜单，让您可以计算服务的价格，价格等于第一个下拉列表 "until the second"，就像应该添加之间的每个价格一样。我的代码：
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">仅当您想要 post 您的数据到服务器时才使用提交 - 您正在调用未定义的 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>