javascript - 计算价格

Question

我正在尝试计算从网站上“订购产品”的最终价格，我只是想知道我哪里出错了，因为要么显示带有“€NaN[HTML element]”的警报

但是现在它说 $('.smallPrice') 有错误 我想知道是否有一种方法可以继承选择输入类型..

编辑 - 现在打印“€NaN

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);
	}

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

Answer 1

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

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

此代码实际上并不需要 jQuery，因为您可以使用 native 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