Question

出于某种原因，我的Javascript脚本文件在Web浏览器中根本没有运行。当我在codepen.io上编写文件时，它们运行正常但由于某种原因它们不再起作用。我检查了我的文件结构并检查了我的代码，所以我看不出任何原因它不起作用。是否还有其他我忘记的事情？

以下是工作代码集的链接：http://codepen.io/Emersonbrandon0/full/vyOQaq/

<html>
  <head>
    <title>Tip Calculator</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="calculationScript.js"></script>
  </head>

  <body>
    <div class="container-fluid">
      <div class="well">
        <div class="mainContent text-center">
          <form name="tipForm">
            How much was your meal?<br><input type="textContent" id="price">
            <br><br> How would you rate your enjoyment of the service?
            <br>
            <select name="service" id="quality">
                <option>Terrible, NEVER coming back</option>
                <option>Bearable</option>
                <option>It was Okay</option>
                <option>Good</option>
                <option>Amazing</option>
              </select>
            <br><br> How many people are in your party?<br><input type="text-content" id="partySize"><br>
            <div class="error"></div>
          <div class="tipArea"></div>
            <button type="button" id="submitButton">Calculate Your Tip</button>
          </form>
        </div>
      </div>
    </div>
  </body>

</html>

和js文件

var submitButton = document.querySelector("#submitButton");
submitButton.addEventListener("click", calculateTip, false);

function calculateTip() {
  tip = 0;
  var price = document.querySelector("#price").value;
  var partySize = document.querySelector("#partySize").value;
  var error = document.querySelector(".error");
  price = parseInt(price);
  partySize = parseInt(partySize);
  if (price !== price || partySize !== partySize) {
    error.textContent = "You must enter a number for the cost and for your party size!";
    error.classList.add("errorStyle");
    tipArea.classList.add("hide");
    tipArea.textContent = "";
    return "You entered invalid information!";
  }
  tip = price;
  var quality = document.querySelector("#quality").value;
  switch (quality) {
    case "Terrible, NEVER coming back":
      tipMultiplier = 0;
      break;
    case "Bearable":
      tipMultiplier = 0.05;
      break;
    case "It was Okay":
      tipMultiplier = 0.15;
      break;
    case "Good":
      tipMultiplier = 0.20;
      break;
    case "Amazing":
      tipMultiplier = 0.25;
      break;
    default:
      tipMultiplier = 0.15;
  }
  tip = (tip * tipMultiplier) / partySize;
  var tipArea = document.querySelector(".tipArea");
  tipArea.classList.add("show");
  tipArea.textContent = "You should tip $" + tip;
}

Answer 1

您的脚本应该在关闭正文标记之前。尝试更新您的HTML文件：

<html>
  <head>
    <title>Tip Calculator</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>

  <body>
    <div class="container-fluid">
      <div class="well">
        <div class="mainContent text-center">
          <form name="tipForm">
            How much was your meal?<br><input type="textContent" id="price">
            <br><br> How would you rate your enjoyment of the service?
            <br>
            <select name="service" id="quality">
                <option>Terrible, NEVER coming back</option>
                <option>Bearable</option>
                <option>It was Okay</option>
                <option>Good</option>
                <option>Amazing</option>
              </select>
            <br><br> How many people are in your party?<br><input type="text-content" id="partySize"><br>
            <div class="error"></div>
          <div class="tipArea"></div>
            <button type="button" id="submitButton">Calculate Your Tip</button>
          </form>
        </div>
      </div>
    </div>

    <script src="calculationScript.js"></script>
  </body>

</html>

Javascript不适用于HTML

1 个答案: