使用Java的预订计算器

Question

我正在尝试创建一个计算器，以这种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> 

Answer 1

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

首先为每个元素添加“ 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上尝试此解决方案