英文:
Input field that calculates tier pricing
问题
-
当minQty小于100时,我收到"NaN"的消息。最好的情况是这是不可能的,当您尝试将数字降至100时,它会固定在100。即使尝试键入它,它也会切换回100。另一种情况是显示类似"不可能低于100"的消息。默认的起始情况应该是100,并且应该显示价格为100。
-
我希望以欧元的形式显示输出,使用逗号分隔,如€257,20,而不是257.20。
我已经在Stackoverflow上找到了类似的解决方案,但无法使其正常工作。
我已经很接近了,但这两个问题很困难。
有人有办法如何完成这两个任务吗?
英文:
I'm trying to create a calculator with Javascript and with the help of JSfiddle I am pretty far but I need some extra's that I am struggling with.
This is the code so far:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(function() {
var tier_prices = [
{ minQty: 100, unitPrice:2.57 },
{ minQty: 150, unitPrice:1.86 },
{ minQty: 200, unitPrice:1.50 }
];
$('#quantity').on("change input keyup", function() {
var qty = +this.value;
var price;
for (var i = 0; i < tier_prices.length && qty >= tier_prices[i].minQty; i++) {
price = tier_prices[i].unitPrice;
}
$('#price_output').text(price * qty);
});
});
<!-- language: lang-html -->
<input type="number" id="quantity" name="quantity" min="100" max="500" value="100">
<p id="price_output"></p>
<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
<!-- end snippet -->
I have two issues:
-
When minQty is lower than 100 I get the message "NaN". The best situation is that this is not possible and when you try to lower the number to 100 it is stuck to 100. Even when to try to type it it will switch back to 100. The other scenario is that there will be dislayed a message like "it is not possible to go lower than 100". Also the default starting situation should be with 100 and the calculated price that should be shown with 100.
-
I want to display the output in Euro's comma seperated like this: €257,20 and not like 257.20.
I already solutions like this on Stackoverflow:
Change dots to commas
but can't get it to work properly.
I am very close but those two things are hard.
Anybody has an idea how I can accomplish this?
答案1
得分: 1
你可以尝试只使用 input 事件的以下方式:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="quantity" name="quantity" min="100" max="500" value="100">
<p id="price_output"></p>
<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
<script>
$(function() {
var tier_prices = [
{ minQty: 100, unitPrice: 2.57 },
{ minQty: 150, unitPrice: 1.86 },
{ minQty: 200, unitPrice: 1.50 }
];
var minQty = 100; // 设置最小数量
$('#quantity').on("input", function() {
var qty = +this.value;
if (isNaN(qty) || qty < minQty) {
this.value = minQty; // 重置值为最小值
$('#price_output').text("不能低于100");// 显示消息
return;
}
var price;
for (var i = 0; i < tier_prices.length && qty >= tier_prices[i].minQty; i++) {
price = tier_prices[i].unitPrice;
}
var totalPrice = price * qty;
var formattedPrice = "€" + totalPrice.toFixed(2).replace(".", ",");
$('#price_output').text(formattedPrice);
});
// 触发计算
$('#quantity').trigger("input");
});
</script>
英文:
You can try the following way using the input event only:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="quantity" name="quantity" min="100" max="500" value="100">
<p id="price_output"></p>
<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
<script>
$(function() {
var tier_prices = [
{ minQty: 100, unitPrice: 2.57 },
{ minQty: 150, unitPrice: 1.86 },
{ minQty: 200, unitPrice: 1.50 }
];
var minQty = 100; //set the minimum quantity
$('#quantity').on("input", function() {
var qty = +this.value;
if (isNaN(qty) || qty < minQty) {
this.value = minQty; //reset value to minimum
$('#price_output').text("It is not possible to go lower than 100");//show the message
return;
}
var price;
for (var i = 0; i < tier_prices.length && qty >= tier_prices[i].minQty; i++) {
price = tier_prices[i].unitPrice;
}
var totalPrice = price * qty;
var formattedPrice = "€" + totalPrice.toFixed(2).replace(".", ",");
$('#price_output').text(formattedPrice);
});
//trigger the calculation
$('#quantity').trigger("input");
});
</script>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论