JavaScript引导程序不工作
我对Bootstrap非常陌生，并尝试将我的HTML和JavaScript转换为Bootstrap。这是我的HTML的代码，它也有脚本。我想我遗漏了一个页脚，但我不确定。这应该是一份订单。它在没有引导的情况下完全可以正常工作。我不认为我正在使用jQuery来实现这一点，但如果我应该这样做，我也会使用它JavaScript引导程序不工作,javascript,html,bootstrap-4,Javascript,Html,Bootstrap 4,我对Bootstrap非常陌生，并尝试将我的HTML和JavaScript转换为Bootstrap。这是我的HTML的代码，它也有脚本。我想我遗漏了一个页脚，但我不确定。这应该是一份订单。它在没有引导的情况下完全可以正常工作。我不认为我正在使用jQuery来实现这一点，但如果我应该这样做，我也会使用它 <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Order Form<
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Order Form</title>
<link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.min.css">
<script src="bootstrap-4.1.3/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
body {
background: #2C3E50;
background: -webkit-linear-gradient(to right, #4CA1AF, #2C3E50);
background: linear-gradient(to right, #4CA1AF, #2C3E50);
font-family: helvetica;
text-align: center
}
table {
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: #7de5f3;
border-style: solid;
border-color: rgb(61, 234, 247);
border-width: medium;
padding: 8px
}
</style>
<style>
input[id^=Qty] { width:5em; }
td:first-child { width:80px; }
</style>
</head>
<body>
<h1 style="color : white"> Gift Shop </h1>
<form>
<link rel="stylesheet" type="text/css" href="Bootstrap.css" media="screen" />
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableHead">Item</div>
<div class="divTableHead">Image</div>
<div class="divTableHead">Quantity</div>
<div class="divTableHead">Price</div>
<div class="divTableHead">Total</div>
</div>
<div class="divTableRow">
<div class="divTableCell">Hat</div>
<div class="divTableCell"><img src="images/hat.gif" alt="Hat" /></div>
<div class="divTableCell"><input id="QtyA" type="text" /></div>
<div class="divTableCell">$3.00</div>
<div class="divTableCell"> </div>
</div>
<div class="divTableRow">
<div class="divTableCell">T Shirt</div>
<div class="divTableCell"><img src="images/t_shirt.gif" alt="T-Shirt" /></div>
<div class="divTableCell"><input id="QtyB" type="text" /></div>
<div class="divTableCell">$4.00</div>
<div class="divTableCell"> </div>
</div>
<div class="divTableRow">
<div class="divTableCell">Glasses</div>
<div class="divTableCell"><img src="images/glasses.gif" alt="Glasses" /></div>
<div class="divTableCell"><input id="QtyC" type="text" /></div>
<div class="divTableCell">$5.00</div>
<div class="divTableCell"> </div>
</div>
<div class="divTableRow">
<div class="divTableCell">Total:</div>
<div class="divTableCell"> </div>
</div>
</div>
</div>
<br>
<input type="button" value="Get Grand Total">
<input type="reset" value="Reset">
</form>
<script>
var qtyBoxA = document.getElementById('QtyA');
var qtyBoxB = document.getElementById('QtyB');
var qtyBoxC = document.getElementById('QtyC');
var totBoxA = document.getElementById('TotalA');
var totBoxB = document.getElementById('TotalB');
var totBoxC = document.getElementById('TotalC');
var grandTot = document.getElementById('grandTotal');
var btnGetTot = document.querySelector("input[type=button]");
var btnReset = document.querySelector("input[type=reset]");
qtyBoxA.addEventListener("change", calc);
qtyBoxB.addEventListener("change", calc);
qtyBoxC.addEventListener("change", calc);
btnGetTot.addEventListener("click", getGrandTotal);
btnReset.addEventListener("click", reset);
var gt = null;
function calc() {
var priceA = 3;
var priceB = 4;
var priceC = 5;
gt = 0;
var qtyA = parseInt(qtyBoxA.value, 10);
var qtyB = parseInt(qtyBoxB.value, 10);
var qtyC = parseInt(qtyBoxC.value, 10);
if (!isNaN(qtyA)) { totBoxA.textContent = qtyA * priceA; gt += +totBoxA.textContent; }
if (!isNaN(qtyB)) { totBoxB.textContent = qtyB * priceB; gt += +totBoxB.textContent; }
if (!isNaN(qtyC)) { totBoxC.textContent = qtyC * priceC; gt += +totBoxC.textContent; }
grandTot.textContent = gt.toFixed(2);
}
function getGrandTotal(){
calc();
alert(gt);
}
function reset(){
totBoxA.textContent = "";
totBoxB.textContent = "";
totBoxC.textContent = "";
grandTot.textContent = "";
}
</script>
</body>
</html>
订单
身体{
背景#2C3E50；
背景：-webkit线性梯度（向右，#4CA1AF，#2C3E50）；
背景：线性梯度（向右，#4CA1AF，#2C3E50）；
字体系列：helvetica；
文本对齐：居中
}
桌子{
左边距：自动；
右边距：自动；
文本对齐：居中；
背景色：#7de5f3；
边框样式：实心；
边框颜色：rgb（61234247）；
边框宽度：中等；
填充：8px
}
输入[id^=Qty]{宽度：5em；}
td:第一个子项{宽度：80px；}
礼品店
项目
形象
量
价格
全部的
帽子
$3.00
T恤衫
$4.00
玻璃杯
$5.00
总数：
var qtyBoxA=document.getElementById（'QtyA'）；
var qtyBoxB=document.getElementById（'QtyB'）；
var qtyBoxC=document.getElementById（'QtyC'）；
var totBoxA=document.getElementById（'TotalA'）；
var totBoxB=document.getElementById（'TotalB'）；
var totBoxC=document.getElementById（'TotalC'）；
var grandTot=document.getElementById（'grandTotal'）；
var btnGetTot=document.querySelector（“输入[type=button]”）；
var btnReset=document.querySelector（“输入[type=reset]”）；
qtyBoxA.addEventListener（“变更”，计算）；
qtyBoxB.addEventListener（“变更”，计算）；
qtyBoxC.addEventListener（“变更”，计算）；
btnGetTot.addEventListener（“单击”，获取总计）；
btnReset.addEventListener（“单击”，重置）；
var gt=null；
函数计算（）{
var-priceA=3；
var-priceB=4；
var-priceC=5；
gt=0；
var qtyA=parseInt（qtyBoxA.value，10）；
var qtyB=parseInt（qtyBoxB.value，10）；
var qtyC=parseInt（qtyBoxC.value，10）；
如果（！isNaN（qtyA））{totBoxA.textContent=qtyA*priceA；gt+=+totBoxA.textContent；}
如果（！isNaN（qtyB））{totBoxB.textContent=qtyB*priceB；gt+=+totBoxB.textContent；}
如果（！isNaN（qtyC））{totBoxC.textContent=qtyC*priceC；gt+=+totBoxC.textContent；}
grandTot.textContent=gt.toFixed（2）；
}
函数getGrandTotal（）{
计算（）；
警报（gt）；
}
函数重置（）{
totBoxA.textContent=“”；
totBoxB.textContent=“”；
totBoxC.textContent=“”；
grandTot.textContent=“”；
}
所以在引导js之前加载这些您想在这里做什么？