Question

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

目前我已经创建了一个非常简单的设置，但要完成它仍然有很多工作要做，或者至少这是我所相信的。

接下来是我的问题，我希望它能够根据当前selected objects计算，以及希望留下的天数。

截至目前，我唯一能做的就是最后一个文本框，它会显示复选框上选中的对象。我想要它做的是能够以总价格显示选中的每个对象。例如：“您希望为[selectDestination] [days]个[selectRom]单人间和[selectRom2]双人间订购[endPrice]。希望/希望不要租用设备，具体取决于复选框中点击的内容。总计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; }“

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

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

<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>

# -*- coding: utf-8 -*-
from flask import Flask
from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_restful import reqparse, abort, Api, Resource

app = Flask(__name__)
api = Api(app)
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://root:12345@localhost/catchat'
db = SQLAlchemy(app)

class Users(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    password = db.Column(db.String(80), unique=True)
    email = db.Column(db.String(120), unique=True)

    def __init__(self, email, password):
        self.password = password
        self.email = email

    def __repr__(self):
        return '<Users %r>' % self.username

def user_not_exist(user_id):

    if user_id not in USERS:
        abort(404, message="User {} doesn't exist".format(user_id))

class UserList(Resource):

    def get(self):
        return USERS

    def post(self):

        args = parser.parse_args()      
        new_user = {}
        new_user = Users(args['email'], args['password'])
        new_user_id = db.session.add(new_user)
        db.session.add(new_user)
        db.session.commit()
        return new_user_id, 200



api.add_resource(UserList, '/Users')

if __name__ == '__main__':
    app.run(debug=True)

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

上试用此解决方案

使用Javascript预订计算器

1 个答案: