javascript - 计算价格

我正在尝试计算从网站上“订购产品”的最终价格，我只是想知道哪里出问题了，因为这两个都显示了“€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>

最佳答案

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

$函数将选择器作为参数，并返回所有匹配的元素。例如，$('.smallPrice')搜索样式类为smallPrice的所有元素。如果要搜索ID为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

关于javascript - 计算价格，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49786450/