Javascript not applying to html

Question

For some reason my Javascript script files are not running at all in the web browser. When I wrote the files on codepen.io they functioned correctly but for some reason they no longer work. I checked my file structure and checked my code so I can not see any reason it would not work. Is there possibly something else that I've forgotten?

Here is a link to the working codepen: 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>

and the js file

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;
}

You've forgotten to [check the browser console for errors](http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers). — JJJ, Mar 14 '17 at 14:30
Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — JJJ, Mar 14 '17 at 14:31
Is this all the code you use for this Tip Calculator? It is possible that if you add this into some other existing HTML code, maybe the code gets broken due to some random unclosed HTML tags. Looking at your code, it is just fine. — Manuel Cheța, Mar 14 '17 at 14:45

score 1 · Accepted Answer · answered Mar 14 '17 at 14:36

Your scripts should be just before the closing body tag. Try updating your HTML file:

<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 not applying to html

1 Answers1