-2
なぜスクリプトが動作しないのかわかりません。何が悪いと思われるのかについての洞察を教えてください。 CSSやブートストラップが適用されていない単純なhtmlで動作するようになるため、ブートストラップが干渉しているかどうかわかりません。ここでHTML5 JavaScriptカウンティングスクリプトが動作しない
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pizza Menue</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<meta content="width=device-width,initial-scale=1.0" name="viewport">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> </head>
<body>
<div class="container">
<div class="jumbotron jumbotron-fluid bg-danger">
<div class="container align-center">
<h1 class="display-2 text-center bold"><p class="text-light">Pure Pizza</p></h1>
</div>
</div>
<div class="container">
<button type="button" id="btnorder" class="btn btn-secondary btn-lg btn-block btn-danger" onclick="getReceipt()">Place Order By Clicking Here!</button>
</div>
<div class="container m-3">
<h3>Pizza Size</h3>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-secondary active">
<input class="size" type="radio" name="size" value="Personal Pizza" autocomplete="off" checked>Personal Pizza
</label>
<label class="btn btn-secondary">
<input class="size" type="radio" name="size" value="Medium Pizza" autocomplete="off">Medium Pizza
</label>
<label class="btn btn-secondary">
<input class="size" type="radio" name="size" value="Large Pizza" autocomplete="off">Large Pizza
</label>
<label class="btn btn-secondary">
<input class="size" type="radio" name="size" value="Extra Large Pizza" autocomplete="off">Extra Large Pizza
</label>
</div>
</div>
<div class="container">
<div class="container m-3">
<h3>Meats</h3>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="meats" value="Pepperoni">
Pepperoni
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input meats" type="checkbox" name="meats" value="Canadina Bacon" >
Canadian Baon
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input meats" type="checkbox" name="meats" value="Ground Beef">
Ground Beef
</label>
</div>
<div class="form-check ">
<label class="form-check-label">
<input class="form-check-input meats" type="checkbox" name="meats" value="Anchovy" >
Anchovies
</label>
</div>
<div class="form-check ">
<label class="form-check-label">
<input class="form-check-input meats" type="checkbox" name="meats" value="Chicken" >
Chicken
</label>
</div>
<div class="form-check ">
<label class="form-check-label">
<input class="form-check-input meats" type="checkbox" name="meats" value="Sausage" >
Sausage
</label>
</div>
</div>
<div class="container">
<div id="showText"></div>
<div id="totalPrice"></div>
</div>
</div>
<script src="./js/js.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
は、HTMLと一緒に行くスクリップで、起こっていただきまし把握カント私は、トリプル、それが正しくリンクされており、すべてが正しく入力されていることを確認しているので、私はここで途方に暮れています。
function getReceipt() {
var text1 = "<h3>You Ordered:</h3>;
var runningTotal = 0;
var sizeTotal = 0;
var sizeArray = document.getElementsByClassName("size");
}
for (var i = 0; i < sizeArray.length; i++) {
if (sizeArray[i].checked) {
var selectedSize = sizeArray[i].value;
text1 = text1+selectedSize+"<br>";
}
}
if (selectedSize === "Personal Pizza") {
sizeTotal = 6;
} else if (selectedSize === "Medium Pizza") {
sizeTotal = 10;
} else if (selectedSize === "Large Pizza") {
sizeTotal = 14;
} else if (selectedSize === "Extra Large Pizza") {
sizeTotal = 16;
}
runningTotal = sizeTotal;
console.log(selectedSize+" = $"+sizeTotal+".00");
console.log("size text1: "+text1);
console.log("subtotal: $"+runningTotal+".00");
getMeat(runningTotal,text1); // All three of these variables will be passed on to each function
};
function getMeat(runningTotal,text1) {
var meatTotal = 0;
var selectedMeat = [];
var meatArray = document.getElementsByClassName("meats");
for (var j = 0; j < meatArray.length; j++) {
if (meatArray[j].checked) {
selectedMeat.push(meatArray[j].value);
console.log("selected meat item: ("+meatArray[j].value+")");
text1 = text1+meatArray[j].value+"<br>";
}
}
var meatCount = selectedMeat.length;
if (meatCount > 1) {
meatTotal = (meatCount - 1);
} else {
meatTotal = 0;
}
ルック。 。 。何かが欠けている？ （コンソールエラーが記録されていますか？） –
「動作していません」とはどういう意味ですか？具体的にする。これを読んでください：https://stackoverflow.com/help/mcve –