计算价格

Question

我正在尝试计算＆＃34;订购产品的最终价格＆＃34;关闭一个网站，我只是想知道我哪里出错了，因为要么显示一个警告＆＃34;€NaN [HTML元素]＆＃34;

但是现在它说$（＆＃39; .smallPrice＆＃39;）有错误 我想知道有没有办法从选择输入类型继承..

编辑 - 现在打印＆＃34;€NaN

＆＃13;

＆＃13;

function multiply(){
	
	var smallPrice  = 149.99;
	var mediumPrice = 249.99;
	var largePrice = 399.99;

	var quantity = document.getElementById($("#quantity").value);

	var stanDeliver = 20.00;
	var expresDeliver = 33.00;
	var nextDeliver = 50.00;


	if ($("#smallPrice").val() == smallPrice){
		var total = quantity * smallPrice;
	}else if ($("#mediumPrice").val() == mediumPrice){
		var total = quantity * mediumPrice;
	}else{
		var total = quantity * largePrice;
	}

	var deli = document.getElementById($("#deliver").value);
	var total = quantity * pricing + deli;
	console.log(total,size)
	alert("The price is €"+total);
	}

＆＃13;

<table id="pricing">
  <tr>
    <th>Quantity</th>
    <th>Color</th>
    <th>Size</th>
    <th>Delivery</th>
    <th>Total</th>
  </tr>

  <tr>
    <td>
      <input type="number" name="Quantity" min="1" max="2" 
            id="quantity">
    </td>
    <td>
      <select name="coloured">
      <option value="rose">Rose Gold</option>
      <option value="space">Space</option>
    </td>
    <td>
      <select name="size" id="size">
      <option value="small" id="smallPrice">3.0mm</option>
      <option value="medium" id="mediumPrice">4.5mm</option>
      <option value="large" id="largePrice">6.0mm</option>
    </td>
    <td>
      <select name="deliver" id="deliver">
      <option value="standard" id="stanDeliver">Standard EU Delivery</option>
      <option value="express" id="expresDeliver">Express 3 Day Delivery </option>
      <option value="nextday" id="nextDeliver">Next Day Delivery</option>
    </td>
    <td><input type="text" name="total" value="€" size="5"  id="total" readonly  </td>
  </tr>
  <tr id="price" value=euro></tr>
  <input type = "submit" size = "20" name = "Send" id = "submit" value = "Send" onClick = "multiply()">

</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的问题是您将jQuery对象视为值。

$函数将选择器作为参数接收并返回任何匹配的元素。例如，$('.smallPrice')搜索样式类为smallPrice的所有元素。如果您要搜索标识为smallPrice的元素，可以在id前面加上哈希：$('#smallPrice')。

此代码并不真正需要jQuery，因为您可以使用本机javascript通过id获取元素：

var prices = {
  small: 149.99,
  medium: 249.99,
  large: 399.99,
  standard: 20.00,
  express: 33.00,
  nextday: 50.00
};

function multiply(){
  var quantity = document.getElementById("quantity").value;
  var size = document.getElementById("size").value;
  var deli = document.getElementById("deliver").value;

  if(!quantity){
    return alert("Please enter a quantity");
  }

  var total = (quantity * prices[size]) + prices[deli];

  console.log(total)
  alert("The price is €"+total);
}

这是一个掠夺者：https://plnkr.co/edit/jM3sYAbfKJ31joot1fUX?p=preview

Answer 2

您的JS代码只有一些错误，而某些HTML代码未关闭：

        <!-- HTML -->
<table id="pricing">
    <tr>
        <th>Quantity</th>
        <th>Color</th>
        <th>Size</th>
        <th>Delivery</th>
        <th>Total</th>
    </tr>

    <tr>
        <td>
            <input type="number" name="Quantity" min="1" max="2" 
        id="quantity">
        </td>
        <td>
            <select name="coloured">
              <option value="rose">Rose Gold</option>
              <option value="space">Space</option>
            </select>
        </td>
        <td>
            <select name="size" id="size">
              <option value="small">3.0mm</option>
              <option value="medium">4.5mm</option>
              <option value="large">6.0mm</option>
            </select>
        </td>
        <td>
            <select name="deliver" id="deliver">
            <option value="standard" id="stanDeliver">Standard EU Delivery</option>
            <option value="express" id="expresDeliver">Express 3 Day Delivery </option>
            <option value="nextday" id="nextDeliver">Next Day Delivery</option>
        </td>
        <td><input type="text" name="total" value="€" size="5"  id="total" readonly></td>
    </tr>
    <tr id="price" value=euro></tr>
    <input type = "submit" size = "20" name = "Send" id = "submit" value = "Send" onClick = "multiply()">
</table>

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">

    function multiply(){

        var smallPrice  = 149.99;
        var mediumPrice = 249.99;
        var largePrice = 399.99;

        // Set delivery prices on an object to compare against the value selected for delivery
        var deliveryPrices = {
            'standard' : 10.00,
            'express' : 20.50,
            'nextday' : 40.00
        };

        // Gets the quantity value as a number
        var quantity = Number($("#quantity").val());

        // Compare the prices, i do not understand your logic here
        if ( $('#smallPrice').val() == smallPrice){
            var total = quantity * smallPrice;
        } else if ($("#mediumPrice").val() == mediumPrice){
            var total = quantity * mediumPrice;
        } else {
            var total = quantity * largePrice;
        }

        // Get the delivery value
        var deli = $("#deliver").val();

        // Adds the delivery cost (set previously) to the total
        var total = total + deliveryPrices[deli];

       alert("The price is €"+total);

    }

</script>