使用 Javascript 的预订计算器

Question

我正在尝试创建一个计算器来计算此 form 中所选对象的价格。但我面临的问题是我在 Javascript.

中缺乏技能

目前我已经创建了一个非常简单的设置，但要让它发挥作用还有很多工作要做，至少我是这么认为的。

然后是我的问题，我希望它能够根据当前 selected objects 和希望停留的天数进行计算。

截至目前，我唯一要做的就是最后一个文本框，它显示了在复选框中选择的对象。我想要它做的是能够显示选择到其中的每个对象以及总价。示例："You wish to order [selectDestination] for [days] with [selectRom] single rooms and [selectRom2] double rooms. Wish/wish not to rent equipment depending on what is clicked on in checkboxes. For total [endPrice]"

我知道我在这里要求很多。任何帮助都非常受欢迎。但是，如果有任何问题看起来不清楚或太宽泛而无法询问。请在下面发表评论，我会回复并尽量让我的要求更加明显。

JSFIDDLE https://jsfiddle.net/sa6bLukq/1/

var select = document.getElementById("selectDestinasjon");
var options = [{
  "place": "Konsberg",
  "price": ""
}, {
  "place": "Trysil",
  "price": ""
}, {
  "place": "Beitostølen",
  "price": ""
}];
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>

Answer 1

我根据我的理解尝试了一些东西。我的英语有限，所以也许我错过了一些东西。但是有我的解决方案：

首先为每个元素添加"id"和"data-price"属性，以便select它们，然后设置数据价格以计算旅游总价。我还将您的 "order" 字段更改为 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 ：我保留了您的 select 初始化，我只是删除了“$”以根据您的价格选项。我重写 "myFunction" 来计算总计，并在单个字符串上写下每个 selected 项目：

  $("#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

上尝试此解决方案

使用 Javascript 的预订计算器

Booking calculator using Javascript

html

javascript

calculator