每当我通过它运行的变量小于 50 时,我的函数就无法正确运行
My function does not correctly run whenever the variable I run through it is less than 50
我写了一个名为"calcFinalTotal()"的函数,用于计算购买所有准备好的物品的税后折扣 将所述项目的总和存入输入标签中且 ID 为"总税额"的函数。
calcFinalTotal() 应该为$ 50-$ 100之间的订单提供10%的折扣,$ 101-$ 150的20%折扣,>$ 250的25%折扣。(使用 if-else 语句计算)
calcFinaltotal() 获取折扣后的总数并将其放入 ID 为 "totalFinal" 的输入标签中
但问题是...当"总税额"小于 50 时,不会将任何内容输出到"总最终"中
function calcTotal() {
var cake1 = document.getElementById("cake1amount").value * document.getElementById("cake1").value;
var cake2 = document.getElementById("cake2amount").value * document.getElementById("cake2").value;
var cake3 = document.getElementById("cake3amount").value * document.getElementById("cake3").value;
var cake4 = document.getElementById("cake4amount").value * document.getElementById("cake4").value;
var cake5 = document.getElementById("cake5amount").value * document.getElementById("cake5").value;
var cake6 = document.getElementById("cake6amount").value * document.getElementById("cake6").value;
var cake7 = document.getElementById("cake7amount").value * document.getElementById("cake7").value;
var cake8 = document.getElementById("cake8amount").value * document.getElementById("cake8").value;
var muffin1 = document.getElementById("muffin1amount").value * document.getElementById("muffin1").value;
var muffin2 = document.getElementById("muffin2amount").value * document.getElementById("muffin2").value;
var muffin3 = document.getElementById("muffin3amount").value * document.getElementById("muffin3").value;
var muffin4 = document.getElementById("muffin4amount").value * document.getElementById("muffin4").value;
var muffin5 = document.getElementById("muffin5amount").value * document.getElementById("muffin5").value;
var muffin6 = document.getElementById("muffin6amount").value * document.getElementById("muffin6").value;
var muffin7 = document.getElementById("muffin7amount").value * document.getElementById("muffin7").value;
var muffin8 = document.getElementById("muffin8amount").value * document.getElementById("muffin8").value;
var cookie1 = document.getElementById("cookie1amount").value * document.getElementById("cookie1").value;
var cookie2 = document.getElementById("cookie2amount").value * document.getElementById("cookie2").value;
var cookie3 = document.getElementById("cookie3amount").value * document.getElementById("cookie3").value;
var cookie4 = document.getElementById("cookie4amount").value * document.getElementById("cookie4").value;
var cookie5 = document.getElementById("cookie5amount").value * document.getElementById("cookie5").value;
var cookie6 = document.getElementById("cookie6amount").value * document.getElementById("cookie6").value;
var cookie7 = document.getElementById("cookie7amount").value * document.getElementById("cookie7").value;
var cookie8 = document.getElementById("cookie8amount").value * document.getElementById("cookie8").value;
if (document.getElementById("cookie1amount").value == 6) {
cookie1 = 15;
} else if (document.getElementById("cookie1amount").value == 12) {
cookie1 = 25;
}
if (document.getElementById("cookie2amount").value == 6) {
cookie2 = 15;
} else if (document.getElementById("cookie2amount").value == 12) {
cookie2 = 25;
}
if (document.getElementById("cookie3amount").value == 6) {
cookie3 = 15;
} else if (document.getElementById("cookie3amount").value == 12) {
cookie3 = 25;
}
if (document.getElementById("cookie4amount").value == 6) {
cookie4 = 15;
} else if (document.getElementById("cookie4amount").value == 12) {
cookie4 = 25;
}
if (document.getElementById("cookie5amount").value == 6) {
cookie5 = 15;
} else if (document.getElementById("cookie5amount").value == 12) {
cookie5 = 25;
}
if (document.getElementById("cookie6amount").value == 6) {
cookie6 = 15;
} else if (document.getElementById("cookie6amount").value == 12) {
cookie6 = 25;
}
if (document.getElementById("cookie7amount").value == 6) {
cookie7 = 15;
} else if (document.getElementById("cookie7amount").value == 12) {
cookie7 = 25;
}
if (document.getElementById("cookie8amount").value == 6) {
cookie8 = 15;
} else if (document.getElementById("cookie8amount").value == 12) {
cookie8 = 25;
}
var bread1 = document.getElementById("bread1amount").value * document.getElementById("bread1").value;
var bread2 = document.getElementById("bread2amount").value * document.getElementById("bread2").value;
var bread3 = document.getElementById("bread3amount").value * document.getElementById("bread3").value;
var bread4 = document.getElementById("bread4amount").value * document.getElementById("bread4").value;
var bread5 = document.getElementById("bread5amount").value * document.getElementById("bread5").value;
var bread6 = document.getElementById("bread6amount").value * document.getElementById("bread6").value;
var bread7 = document.getElementById("bread7amount").value * document.getElementById("bread7").value;
var bread8 = document.getElementById("bread8amount").value * document.getElementById("bread8").value;
var total = cookie1 + cookie2 + cookie3 + cookie4 + cookie5 + cookie6 + cookie7 + cookie8 + muffin1 + muffin2 + muffin3 + muffin4 + muffin5 + muffin6 + muffin7 + muffin8 + cake1 + cake2 + cake3 + cake4 + cake5 + cake6 + cake7 + cake8 + bread1 + bread2 + bread3 + bread4 + bread5 + bread6 + bread7 + bread8;
var tax = total / 100;
tax = tax * 4;
total += tax;
document.getElementById("totaltaxamount").value = total;
}
function calcFinalTotal() {
var totalFinal = document.getElementById("totaltaxamount").value;
if (document.getElementById("totaltaxamount").value > 150) {
totalFinal = totalFinal / 100;
totalFinal = totalFinal * 75;
document.getElementById("totalFinal").value = "$" + totalFinal.toFixed(2);
} else if (totalFinal > 100 && totalFinal <= 150) {
totalFinal = totalFinal / 100;
totalFinal = totalFinal * 80;
document.getElementById("totalFinal").value = "$" + totalFinal.toFixed(2);
} else if (totalFinal >= 50 && totalFinal < 100) {
totalFinal = totalFinal / 100;
totalFinal = totalFinal * 90;
document.getElementById("totalFinal").value = "$" + totalFinal.toFixed(2);
} else {
document.getElementById("totalFinal").value = "$" + totalFinal.toFixed(2);
}
}
<html>
<head>
<link rel="icon" type="image" href="bee.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bea's Bakery</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="functions.js"></script>
</head>
<body>
<div class="header">
<div id="boxleft">
<div id="boxpart">
<a href="home.html"> Home </a>
</div>
<div id="boxpart">
<a href="about.html"> About </a>
</div>
<div id="boxpart" style="border-right:0px;">
<a href="contact.html"> Contact </a>
</div>
</div>
<div id="boxright">
<div id="boxpart">
<a href="menu.html"> Menu </a>
</div>
<div id="boxpart">
<a href="order.html"> Order </a>
</div>
<div id="boxpart" style="border-right:0px;">
<a href="awards.html"> awards </a>
</div>
</div>
<div id="logo">
<a href="home.html">
<img src="logo.png" />
</a>
</div>
</div>
<!-- ************************** Header Ends *************************************** -->
<div class="wrapper">
<div id="container">
<div id="orderbox">
<div id="title">
Order From Us
</div>
<form id="orderform">
<fieldset>
<div id="lefts">
<table>
<tr>
<th colspan="2">Cakes</th>
</tr>
<tr>
<td>
<label />Elegant Cake |
<div id="right">$
<input type="numbers" value="350" id="cake1">amount:</div>
</label>
</td>
<td>
<input type="number" id="cake1amount" min="0" max="10">
</td>
</tr>
<tr>
<td>
<label />10-Layer Cake |
<div id="right">$
<input type="numbers" value="80" id="cake2">amount:</div>
</label>
</td>
<td>
<input type="number" id="cake2amount" min="0" max="10">
</td>
</tr>
<tr>
<td>
<label />Blueberry CheeseCake |
<div id="right">$
<input type="numbers" value="50" id="cake3">amount:</div>
</label>
</td>
<td>
<input type="number" id="cake3amount" min="0" max="10">
</td>
</tr>
<tr>
<td>
<label />Ladyfinger Cake |
<div id="right">$
<input type="numbers" value="80" id="cake4">amount:</div>
</label>
</td>
<td>
<input type="number" id="cake4amount" min="0" max="10">
</td>
</tr>
<tr>
<td>
<label>Pound Cake |
<div id="right">$
<input type="numbers" value="40" id="cake5">amount:</div>
</label>
</td>
<td>
<input type="number" id="cake5amount" min="0" max="10">
</td>
</tr>
<tr>
<td>
<label />Red Velvet Cake |
<div id="right">$
<input type="numbers" value="60" id="cake6">amount:</div>
</label>
</td>
<td>
<input type="number" id="cake6amount" min="0" max="10">
</td>
</tr>
<tr>
<td>
<label />Choco-explosion Cake |
<div id="right">$
<input type="numbers" value="70" id="cake7">amount:</div>
</label>
</td>
<td>
<input type="number" id="cake7amount" min="0" max="10">
</td>
</tr>
<tr>
<td>
<label />StrawberryBanana Cupcake |
<div id="right">$
<input type="numbers" value="3" id="cake8">amount:</div>
</label>
</td>
<td>
<input type="number" id="cake8amount" min="0" max="10">
</td>
</tr>
<tr>
<th colspan="2">Muffins</th>
</tr>
<tr>
<td>
<label />Banana Nut Muffin |
<div id="right">$
<input type="numbers" value="5" id="muffin1">amount:</div>
</label>
</td>
<td>
<input type="number" id="muffin1amount" min="0" max="10">
</td>
</tr>
<tr>
<td>
<label />Blackberry Muffin |
<div id="right">$
<input type="numbers" value="5" id="muffin2">amount:</div>
</label>
</td>
<td>
<input type="number" id="muffin2amount" min="0" max="10">
</td>
</tr>
<tr>
<td>
<label />Carrot Cake Muffin |
<div id="right">$
<input type="numbers" value="5" id="muffin3">amount:</div>
</label>
</td>
<td>
<input type="number" id="muffin3amount" min="0" max="10">
</td>
</tr>
<tr>
<td>
<label />Chocolate Muffin |
<div id="right">$
<input type="numbers" value="7" id="muffin4">amount:</div>
</label>
</td>
<td>
<input type="number" id="muffin4amount" min="0" max="10">
</td>
</tr>
<tr>
<td>
<label />Raspberry Muffin |
<div id="right">$
<input type="numbers" value="5" id="muffin5">amount:</div>
</label>
</td>
<td>
<input type="number" id="muffin5amount" min="0" max="10">
</td>
</tr>
<tr>
<td>
<label />Cinnamon Raisin Muffin |
<div id="right">$
<input type="numbers" value="5" id="muffin6">amount:</div>
</label>
</td>
<td>
<input type="number" id="muffin6amount" min="0" max="10">
</td>
</tr>
<tr>
<td>
<label />Blueberry Muffin |
<div id="right">$
<input type="numbers" value="5" id="muffin7">amount:</div>
</label>
</td>
<td>
<input type="number" id="muffin7amount" min="0" max="10">
</td>
</tr>
<tr>
<td>
<label />Strawberry Muffin |
<div id="right">$
<input type="numbers" value="7" id="muffin8">amount:</div>
</label>
</td>
<td>
<input type="number" id="muffin8amount" min="0" max="10">
</td>
</tr>
</table>
</div>
<div id="rights">
<table>
<tr>
<th colspan="2">Cookies</th>
</tr>
<tr>
<td>
<label />Chocolate Chip Cookies |
<div id="right">$
<input type="numbers" value="3" id="cookie1">amount:</div>
</label>
</td>
<td>
<input type="number" id="cookie1amount" min="0" max="12">
</td>
</tr>
<tr>
<td>
<label />Strawberry Cookies |
<div id="right">$
<input type="numbers" value="3" id="cookie2">amount:</div>
</label>
</td>
<td>
<input type="number" id="cookie2amount" min="0" max="12">
</td>
</tr>
<tr>
<td>
<label />Iced Mocha Cookie |
<div id="right">$
<input type="numbers" value="3" id="cookie3">amount:</div>
</label>
</td>
<td>
<input type="number" id="cookie3amount" min="0" max="12">
</td>
</tr>
<tr>
<td>
<label />Orange Creme Cookies |
<div id="right">$
<input type="numbers" value="3" id="cookie4">amount:</div>
</label>
</td>
<td>
<input type="number" id="cookie4amount" min="0" max="12">
</td>
</tr>
<tr>
<td>
<label />Peanut Butter Cookies |
<div id="right">$
<input type="numbers" value="3" id="cookie5">amount:</div>
</label>
</td>
<td>
<input type="number" id="cookie5amount" min="0" max="12">
</td>
</tr>
<tr>
<td>
<label />Sugar Cookies |
<div id="right">$
<input type="numbers" value="3" id="cookie6">amount:</div>
</label>
</td>
<td>
<input type="number" id="cookie6amount" min="0" max="12">
</td>
</tr>
<tr>
<td>
<label />Chocolate Cookies |
<div id="right">$
<input type="numbers" value="3" id="cookie7">amount:</div>
</label>
</td>
<td>
<input type="number" id="cookie7amount" min="0" max="12">
</td>
</tr>
<tr>
<td>
<label />Lemon Cookies |
<div id="right">$
<input type="numbers" value="3" id="cookie8">amount:</div>
</label>
</td>
<td>
<input type="number" id="cookie8amount" min="0" max="12">
</td>
</tr>
<tr>
<th colspan="2">Breads</th>
</tr>
<tr>
<td>
<label />Breakfast Bagel |
<div id="right">$
<input type="numbers" value="3" id="bread1">amount:</div>
</label>
</td>
<td>
<input type="number" id="bread1amount" min="0" max="10">
</td>
</tr>
<tr>
<td>
<label />Baguette |
<div id="right">$
<input type="numbers" value="5" id="bread2">amount:</div>
</label>
</td>
<td>
<input type="number" id="bread2amount" min="0" max="10">
</td>
</tr>
<tr>
<td>
<label />Banana Nut Bread |
<div id="right">$
<input type="numbers" value="10" id="bread3">amount:</div>
</label>
</td>
<td>
<input type="number" id="bread3amount" min="0" max="10">
</td>
</tr>
<tr>
<td>
<label />Challa Bread |
<div id="right">$
<input type="numbers" value="20" id="bread4">amount:</div>
</label>
</td>
<td>
<input type="number" id="bread4amount" min="0" max="10">
</td>
</tr>
<tr>
<td>
<label />Cinnamon Bread |
<div id="right">$
<input type="numbers" value="10" id="bread5">amount:</div>
</label>
</td>
<td>
<input type="number" id="bread5amount" min="0" max="10">
</td>
</tr>
<tr>
<td>
<label />Everything Bagel |
<div id="right">$
<input type="numbers" value="5" id="bread6">amount:</div>
</label>
</td>
<td>
<input type="number" id="bread6amount" min="0" max="10">
</td>
</tr>
<tr>
<td>
<label />Rye Bread |
<div id="right">$
<input type="numbers" value="8" id="bread7">amount:</div>
</label>
</td>
<td>
<input type="number" id="bread7amount" min="0" max="10">
</td>
</tr>
<tr>
<td>
<label />Sourdough Bread |
<div id="right">$
<input type="numbers" value="10" id="bread8">amount:</div>
</label>
</td>
<td>
<input type="number" id="bread8amount" min="0" max="10">
</td>
</tr>
</table>
</div>
<input type="button" onclick="calcTotal()" value="Calculate total">
<br/>
<label for="totaltaxs">Total with Tax</label>
<br/>
<input type="totaltax" id="totaltaxamount">
<br/>
<br/>
<input type="button" onclick="calcFinalTotal()" value="Calculate Discount">
<br/>
<label for="totalFinals">Total with Discount</label>
<br/>
<input type="totalFinal" id="totalFinal">
</fieldset>
</form>
</div>
</div>
<!-- *********************** Footer Starts ******************************* -->
<div class="push"></div>
</div>
<div class="footer">
<div id="textbox">
<div id="box">
<div id="title">
Location
</div>
<p>1257 Great,
<br/>Tasty, VA 22192
<br/>
<br/>Open Daily
<br/>
<br/>
<br/>
</p>
</div>
<div id="box">
<div id="title">
Follow Us
</div>
<p> <a href="https://facebook.com">FaceBook</a>
<br/>
<a href="https://twitter.com">Twitter</a>
<br/>
<a href="https://linkedin.com">LinkedIn</a>
<br/>
<a href="https://instagram.com">InstaGram</a>
<br/>
<br/>
<br/>
</p>
</div>
<div id="box">
<div id="title">
Get in Touch
</div>
<p> <a href="mailto:get@baked.com?subject=I WanT Bred!
&body = Hello bred peepol, ">bread@baked.com</a>
<br/>1-800-Breads
<br/>
<br/>8Am-10Pm
<br/>
<br/>
<br/>
</p>
</div>
<div id="box">
<div id="title">
Orders
</div>
<p>Orders require
<br/>minumum 5 days
<br/>notice before event
<br/>perfection is worth the wait
<br/>
<br/>
<br/>
</p>
</div>
</div>
<div id="copy">
Copyright © 2016 Bea's Bakery
</div>
</div>
</body>
</html>
请帮忙!
var totalFinal = document.getElementById("totaltaxamount").value;
在 calcFinalTotal() 中,您从 totaltaxamount 元素中获取值。但是,这是一个字符串,toFixed() 函数不能对字符串进行操作。将此变量更改为浮点数将允许您在其上运行 toFixed()。我相信这应该可以解决问题。
var totalFinal = parseFloat( document.getElementById("totaltaxamount").value );
相关文章:
- jQuery在元素的上下文中运行函数
- Promise函数在.then之后未运行函数化
- 在.append之后运行函数
- 在on.change事件之后运行函数
- 如果文本或值以字符开头,请运行函数
- 如何在节点模块中从命令行运行函数
- 在Fancybox中提交表单时运行函数
- Don'如果字段为空,则不运行函数
- Javascript:如何在页面重新加载后运行函数
- 成功ajax:如果是200状态代码,则运行函数else另一个函数
- 运行函数ifsuccess($.ajax)有200个状态代码
- JavaScript只有在最后一次被调用时才运行函数
- 在异步AJAX调用完成后,通过变量运行函数
- ng中继器打印结果0;当我运行函数时
- 谷歌扩展:如何在弹出窗口中按下按钮时在我的javascript文件中运行函数
- 获取对在 JavaScript 中运行函数的对象的引用
- 运行函数时出错
- 节点.js子进程中的运行函数
- $.getJSON 在返回数据后不会运行函数
- 如果onchange为true,如何运行函数