大家好，所以我目前为旅行文章制作了两个选择框，我只是这样做，所以我可以确保它有效。我的计划是在三篇文章的每一篇中制作所有部分复选框。然后显示您目前位于页脚中的拉斯维加斯之旅的总费用。（稍后将移至期望的位置，但现在已经很好了。）所以目前代码没有显示任何错误，我和＃39;我真的很困惑。它的意思是当选择一个选择时它将全局变量flightsel1加1，这样我以后可以检查flightsel1＆amp;选择flightsel2然后代码运行函数calcResult（）。这意味着检查totalCost是否小于300或更多，然后它将运行更多的代码。该方法的作用基本上是我检查是否选择了其他内容以及是否要删除成本以便totalCost不会继续添加。无论如何，当它看起来应该是它时，它不起作用。所以，如果有人能伸出援助之手，那将非常感激!!
var flightsel1 = 0;
var flightsel2 = 0;
var totalCost = 0;
function flight1() {
flightsel1 = flightsel1+1;
flightsel2 = flightsel2-100;
calcResult();
}
function flight2() {
flightsel2 = flightsel2+1;
flightsel1 = flightsel1-100;
calcResult();
}
function calcResult() {
if(flightsel1==0) {
}
else if(flightsel1==1){
if(totalCost < 300){
totalCost = totalCost + 350;
document.getElementById("Cost").innerHTML = "Total cost : " + totalCost;
}
else if (totalCost > 300){
totalCost = totalCost - 1000;
totalCost = totalCost + 350;
document.getElementById("Cost").innerHTML = "Total cost : " + totalCost;
}
}
if(flightsel2==0) {
}
else if(flightsel2==1) {
if(totalCost < 300){
totalCost = totalCost + 450;
document.getElementById("Cost").innerHTML = "Total cost : " + totalCost;
}
else if (totalCost > 300){
totalCost = totalCost - 1000;
totalCost = totalCost + 450
document.getElementById("Cost").innerHTML = "Total cost : " + totalCost;
}
}
if(flightsel1==1 && flightsel2==1){
alert("You can only select 1 Flight!");
}
}
function endResult() {
}body
{
background-color: #808080;
}
p
{
!--
}
p.travelclassheader
{
font-weight: bold;
font-size: 35px;
font-family: Tahoma, Geneva, sans-serif;
line-height: 150%;
text-align: center;
color: white;
text-shadow: 2px 2px 3px grey;
word-spacing: 3px;
letter-spacing: -1;
font-variant: small-caps;
}
header
{
text-align:center;
text-shadow: 2px 2px 3px grey;
color: silver;
padding: 20px 0px 0px 0px;
border-bottom: #808080;
position: fixed;
border-bottom: 2px solid #00FFF5;
top: -10;
height: 150px;
left: -10;
width: 105%;
z-index:5;
}
header a
{
text-decoration: none;
text-align:center;
text-shadow: 2px 2px 5px grey;
font-weight: bold;
font-size: 40px;
font-family: Tahoma, Geneva, sans-serif;
line-height: 100%;
color: white;
word-spacing: 3px;
letter-spacing: -1;
font-variant: small-caps;
}
hr {
border: 0;
height: 2px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
header a:visited
{
text-decoration: none;
text-align:center;
text-shadow: 2px 2px 3px grey;
color: silver;
}
article
{
}
article.travelclass
{
text-align:center;
color: silver;
padding: 0px 20px 0px 20px;
background-color: #393E46;
border-bottom: 2px solid #00FFF5;
border-top: 2px solid #00FFF5;
height: 350px;
float: left;
width: 75%;
max-width: 350px;
margin: 0 auto;
}
article.travelclass img
{
float: right;
margin-left: 30px;
margin-right: 25px;
margin-top: -15px;
margin-bottom: 0px;
}
article.accommodationclass
{
text-align:center;
color: silver;
padding: 0px 20px 0px 20px;
background-color: #393E46;
border-bottom: 2px solid #00FFF5;
border-top: 2px solid #00FFF5;
height: 350px;
position: relative;
top: -140px;
left: 0px;
width: 75%;
max-width: 350px;
margin: 0 auto;
}
article.toursclass
{
text-align:center;
color: silver;
padding: 0px 20px 0px 20px;
background-color: #393E46;
border-bottom: 2px solid #00FFF5;
border-top: 2px solid #00FFF5;
height: 350px;
position: relative;
top: -557px;
right: -470px;
width: 75%;
max-width: 350px;
margin: 0 auto;
}
article.costclass
{
padding: 0px 20px 0px 20px;
background-color: #393E46;
border-bottom: 2px solid #00FFF5;
border-top: 2px solid #00FFF5;
height: 35px;
position: relative;
top: -580px;
font-weight: bold;
font-size: 20px;
color: white;
font-family: Tahoma, Geneva, sans-serif;
text-align: justify;
left: 0px;
width: 75%;
max-width: 350px;
margin: 0 auto;
}
h5
{
top: 1000px;
font-weight: bold;
font-size: 20px;
color: white;
font-family: Tahoma, Geneva, sans-serif;
text-align: center;
}
footer
{
text-align:center;
color: silver;
background-color: #393E46;
padding: 10px 0px 0px 0px;
border-bottom: #808080;
position: absolute;
bottom: 0px;
height: 25px;
border-top: 2px solid #00FFF5;
width: 105%;
} <HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="CSS/styles.css">
<TITLE>Las Vegas | Home</TITLE>
<script src="JAVASCRIPT/main.js"></script>
</HEAD>
<BODY>
<HEADER>
<style>
header {
background-image: url("IMAGES/banner.jpg");
}
</style>
<a name="top"><H1>Las Vegas</H1></A>
</HEADER>
<div id="home"></div>
<br>
<br><br><br><br><br><br><hr><br><br>
<br>
<ARTICLE class="travelclass">
<p class="travelclassheader">Travel</p>
<hr>
<p class="class2"><input type="radio" id="flight1" name=flight" value="Qantas" onClick="flight1()">Qantas $350</p>
<p class="class2"><input type="radio" id="flight2" name=flight" value="Virgin" onClick="flight2()">Virgin $450</p>
<p class="class2">Jetstar - $000</p>
<hr>
</ARTICLE>
<br><br><br><br><br>
<ARTICLE class="accommodationclass">
<p class="travelclassheader">Accommodation</p>
<hr>
<p class="class2">Hotel 1 - $000</p>
<p class="class2">Hotel 2 - $000</p>
<p class="class2">Hotel 3 - $000</p>
<hr>
</ARTICLE>
<br><br><br><br><br>
<! Tours class is checkboxes for javascript/>
<ARTICLE class="toursclass">
<p class="travelclassheader">Tours</p>
<hr>
<p class="class2">Tour 1 - $000</p>
<p class="class2">Tour 2 - $000</p>
<p class="class2">Tour 3 - $000</p>
<hr>
</ARTICLE>
<ARTICLE class="costclass">
<p class="costtitle"><h5>Total Cost : </h5></p>
</ARTICLE>
<FOOTER>
<NAV>
<p id=test>Test lolol</p>
<p id=Cost></p>
All Copyright reserved 2017 ©<br>
</NAV>
</FOOTER>
</BODY>
</HTML>