我正在尝试创建一个计算器来计算此中选定对象的价格form。但是我面临的问题是我缺乏内在的技巧Javascript。
目前，我已经创建了一个非常简单的设置，但是要使其正常运行，仍然要做很多工作，或者至少我相信这是要做的。
接下来是我的问题，我希望它能够根据当前selected objects以及一个希望停留的天数进行计算。
截至目前，我要做的唯一一件事就是最后一个文本框，该文本框显示了在复选框上选择的对象。我想要它做的是能够显示选择其中的每个对象以及总价。例如：“你想为了[selectDestination]对[days]与[selectRom]单间和[selectRom2]双人房愿望/心愿不取决于被点击复选框中的哪些租用设备对于总。[endPrice]”
我知道我在这里要求很多。任何帮助都超过了欢迎。但是，如果有什么不清楚的地方，或者问得太多。请在下面发表评论，我会做出回应，并尝试使它变得更加明显。
JSFIDDLE https://jsfiddle.net/sa6bLukq/1/
var select = document.getElementById("selectDestinasjon");
var options = [{
"place": "Konsberg",
"price": "$20"
}, {
"place": "Trysil",
"price": "$30"
}, {
"place": "Beitostølen",
"price": "$40"
}];
for (var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt.place;
el.value = opt.price;
select.appendChild(el);
}
var select = document.getElementById("selectRom");
var select2 = document.getElementById("selectRom2");
var options = ["1", "2", "3"];
for (var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
var el2 = document.createElement("option");
el2.textContent = opt;
el2.value = opt;
select.appendChild(el);
select2.appendChild(el2);
}
function myFunction() {
var coffee = document.forms[0];
var txt = "";
var i;
for (i = 0; i < coffee.length; i++) {
if (coffee[i].checked) {
txt = txt + coffee[i].value + " ";
}
}
document.getElementById("order").value = "You wish to order: " + txt;
}<div>
<form action="">
<br><b>Where do you want to go</b>
<br>
<select id="selectDestinasjon">
<option>Choose a destination</option>
</select>
<br><b>Pick a booking date</b>
<br>
<input type="date">
<br><b>Amount of days you wish to stay</b>
<br>
<input type="number">
<br><b>How many single rooms? </b>
<br>
<select id="selectRom">
<option>How many single rooms?</option>
</select>
<br><b>How many double rooms?</b>
<br>
<select id="selectRom2">
<option>How many double rooms?</option>
</select>
<br>Skipass 200kr:
<input type="checkbox" name="coffee" value="Skipass">
<br>Ski Equipment 1000kr:
<input type="checkbox" name="coffee" value="Ski Equipment">
<br>
<input type="button" onclick="myFunction()" value="Confirm order">
<br>
<input type="text" id="order" size="50">
</div>
<div id="totalPrice"></div>
</form>我以我的理解尝试了一些事情。我的英语有限，所以也许我错过了一些理解。但是有我的解决方案：
首先为每个元素添加“ id”和“ data-price”属性，以便轻松选择它们，然后为calcul tour total-price设置数据价格。我还将您的“订单”字段更改为textarea，以便更好地显示。
<div>
<form action="">
<br><b>Where do you want to go</b>
<br><select id="selectDestinasjon">
<option>Choose a destination</option>
</select>
<br><b>Pick a booking date</b>
<br><input type="date" id="date">
<br><b>Amount of days you wish to stay</b>
<br><input type="number" id="number" data-price="20">
<br><b>How many single rooms? </b>
<br><select id="selectRom" data-price="12">
<option>How many single rooms?</option>
</select>
<br><b>How many double rooms?</b>
<br><select id="selectRom2" data-price="15">
<option>How many double rooms?</option>
</select>
<br>Skipass 200kr:<input type="checkbox" id="skipass" value="Skipass" data-price="45">
<br>Ski Equipment 1000kr:<input type="checkbox" id="equipment" value="Ski Equipment" data-price="100">
<br>
<input type="button" id="myb" value="Confirm order">
<br>
<textarea id="order" cols="35" rows="7"></textarea>
</form>
<div id="totalPrice"></div>
</div>
然后，Javascrip / Jquery：我保留了您选择的初始化，我只是删除了“ $”以您的价格选择。然后我重写“ myFunction”进行计算，并在每个选择的项目上写一个字符串：
$("#myb").click(function() {
var price = 0;
var txt = "";
txt += "You wish to order "+$("#selectDestinasjon option:selected").text();
price = $("#selectDestinasjon").val();
txt += " the "+$("#date").val();
txt += " for "+$("#number").val()+" days";
price *= $("#number").val();
txt += " with "+$("#selectRom option:selected").text()+ " single rooms";
price += $("#selectRom").data("price")*parseFloat($("#selectRom option:selected").text());
txt += " and "+$("#selectRom2 option:selected").text()+ " double rooms.";
price += $("#selectRom2").data("price")*parseFloat($("#selectRom2 option:selected").text());
if ($("#skipass").prop("checked") && $("#equipment").prop("checked") ) {
txt += " Wish a skipass and equipment to rent.";
price += $("#skipass").data("price")+$("#equipment").data("price");
} else if ($("#skipass").prop("checked") ) {
txt += " Wish a skipass.";
price += $("#skipass").data("price");
} else if ($("#equipment").prop("checked") ) {
txt += " Wish to rent equipment.";
price += $("#equipment").data("price");
} else {
txt += " Wish not to rent equipement.";
}
$("#order").val(txt);
$("#totalPrice").text(price+"$");
})
您可以在JSFiddle上尝试此解决方案
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句