何らかの理由で、私の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;
}
あなたが忘れてしまった[エラーのブラウザコンソールをチェック](http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-コンソール別のブラウザ)。 – JJJ
[なぜjQueryやgetElementByIdなどのDOMメソッドが要素を見つけられないのですか?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such- as-getelementbyid-not-find-the-element) – JJJ