每当我通过它运行的变量小于 50 时,我的函数就无法正确运行

My function does not correctly run whenever the variable I run through it is less than 50

本文关键字:运行 函数 我的 小于 变量      更新时间:2023-09-26

我写了一个名为"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 &copy; 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 );