时间戳

首页 > 解决方案 > Javascript 新手制作小费计算器无法弄清楚它为什么不加载？

javascript - Javascript 新手制作小费计算器无法弄清楚它为什么不加载？

问题描述

嘿伙计们，我是 javascript 的新手，我正在尝试通过在网上看到的实验室进行练习，我正在关注发布的原始代码，同时我也在进行自己的调整。我完成了 html 部分和 javascript 部分，但是当我点击计算时没有发生任何事情。我确实检查元素去了控制台并运行它并显示语法错误但我不清楚这个错误在哪里？这是我的代码

<DOCTYPE !html>
  <html lang="en">
  <head>
    <link rel="stylesheet" href="css/tip.css">
    <title>Tip Calculator</title>
    <script type="text/javascript">
      //this is to calculate tip
      function calculateTip() {
        var billAMT = document.getElementBy("billamount").value;
        var serviceQual = document.getElementById("servicequality").value;
        var peopleAmt = document.getElementById("peopleamount").value;

        //to validate input
        if billAmt( === "" || serviceQual == 0) {
          alert("please enter numbers");
          return;
        }

        if (peopleAmt === "" || peopleAmt <= 1) {
          peopleAmt = 1;
          document.getElementById("each").style.display = "none";
        } else {
          document.getElementById("each").style.display = "block";
        }

        // to calculate the tip
        var total = (billAmt * serviceQual) / peopleAmt;

        //to round to two places
        total = Math.round(total * 100) / 100;
        total = total.toFixed(2);

        // to display tip
        document.getElementById("totalTip").style.display = "block";
        document.getElementById("tip").innerHTML = total;
      }
      document.getElementById("totalTip").style.display = "none";
      document.getElementById("each").style.display = "none";

      // to call function
      document.getElementById("calculate").onclick = function() {
        calculateTip();
      };
    </script>
  </head>

  <body>
    <div id="container">
      <h1> Tip Calculator</h1>
      <div id="calculator">
        <form>
          <p> Enter bill amount</p>
          <input id="billamount" tyle="text" placeholder="Bill Amount">
          <p>How was your service?</p>
          <select id="servicequality">
            <option value="0.3">30&#37; &#45; Amazingly LITT</option>
            <option value="0.2">20&#37; &#45; Good</option>
            <option value="0.15">15&#37;&#45;Was ight</option>
            <option value="0.10">10&#37;&#45; bad</option>
            <option value="0.05">5&#37;&#45; Terrible</option>
          </select>
        </form>
        <p>How many people are sharing the bill?</p>
        <input id="peopleamount" type="text" placeholder="# of people">
        <button type="button" id="calculate">Calculate</button>
      </div>
      <div id="totalTip">
        <sup>$</sup><span id="tip">0.00</span>
        <small id="each">each</small>
      </div>
    </div>
  </body>
</html>

标签： javascript

解决方案

您有各种小错误，例如：

  • 将引用的 HTML 元素的脚本放在 HTML 元素本身之前。把它放在身体的底部固定它
  • 使用document.getElementBy代替document.getElementById
  • 引用错误的变量名（声明为billAMT，引用为billAmt）
  • 还有一些印刷错误

<DOCTYPE !html>
  <html lang="en">
  <head>
    <title>Tip Calculator</title>
  </head>

  <body>
    <div id="container">
      <h1> Tip Calculator</h1>
      <div id="calculator">
        <form>
          <p> Enter bill amount</p>
          <input id="billamount" tyle="text" placeholder="Bill Amount">
          <p>How was your service?</p>
          <select id="servicequality">
            <option value="0.3">30&#37; &#45; Amazingly LITT</option>
            <option value="0.2">20&#37; &#45; Good</option>
            <option value="0.15">15&#37;&#45;Was ight</option>
            <option value="0.10">10&#37;&#45; bad</option>
            <option value="0.05">5&#37;&#45; Terrible</option>
          </select>
        </form>
        <p>How many people are sharing the bill?</p>
        <input id="peopleamount" type="text" placeholder="# of people">
        <button type="button" id="calculate">Calculate</button>
      </div>
      <div id="totalTip">
        <sup>$</sup><span id="tip">0.00</span>
        <small id="each">each</small>
      </div>
    </div>
    <script type="text/javascript">
      //this is to calculate tip
      function calculateTip() {
        var billAmt = document.getElementById("billamount").value;
        var serviceQual = document.getElementById("servicequality").value;
        var peopleAmt = document.getElementById("peopleamount").value;

        //to validate input
        if (billAmt === "" || serviceQual == 0) {
          alert("please enter numbers");
          return;
        }

        if (peopleAmt === "" || peopleAmt <= 1) {
          peopleAmt = 1;
          document.getElementById("each").style.display = "none";
        } else {
          document.getElementById("each").style.display = "block";
        }

        // to calculate the tip
        var total = (billAmt * serviceQual) / peopleAmt;

        //to round to two places
        total = Math.round(total * 100) / 100;
        total = total.toFixed(2);

        // to display tip
        document.getElementById("totalTip").style.display = "block";
        document.getElementById("tip").innerHTML = total;
      }
      document.getElementById("totalTip").style.display = "none";
      document.getElementById("each").style.display = "none";

      // to call function
      document.getElementById("calculate").onclick = function() {
        calculateTip();
      };
    </script>
  </body>
</html>

推荐阅读