2017-03-14 8 views
0

何らかの理由で、私のJavascriptスクリプトファイルがWebブラウザで全く実行されていません。私がcodepen.ioでファイルを書いたとき、彼らは正しく機能しましたが、何らかの理由で彼らはもはや動作しませんでした。ファイル構造をチェックしてコードをチェックしたので、うまくいかない理由は見当たりません。私が忘れてしまったことは他にもありますか?あなたのスクリプトがちょうど終了bodyタグの前にする必要がありますhttp://codepen.io/Emersonbrandon0/full/vyOQaq/JavaScriptが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> 
    <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; 
} 
+1

あなたが忘れてしまった[エラーのブラウザコンソールをチェック](http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-コンソール別のブラウザ)。 – JJJ

+1

[なぜjQueryやgetElementByIdなどのDOMメソッドが要素を見つけられないのですか?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such- as-getelementbyid-not-find-the-element) – JJJ

+1

タグを閉じる前にスクリプトを移動します。 –

答えて

1

:ここ

は作業codepenへのリンクです。あなたの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> 
+0

この回答はうまくいった、ありがとう –

関連する問題