Javascript 对总和值的困惑
Javascript confusion about sum values
我正在开发网页。
我需要帮助将点击值加一。
我还需要帮助添加在 "number of items selected"
的某个部分中收集的所有项目的价格
我想加上"Total amount section"中所有商品的总价。
当我点击 Add to cart 时，它会在文本框中显示加 1，但再次点击按钮时不会再添加更多。
body {
margin: 0;
padding: 0;
line-height: 1.5em;
background: #782609 url(images/body_bg.jpg) repeat-x;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
}
a:link,
a:visited {
color: #621c03;
text-decoration: none;
font-weight: bold;
}
a:active,
a:hover {
color: #621c03;
text-decoration: none;
font-weight: bold;
}
h1 {
font-size: 22px;
color: white;
font-weight: bold;
height: 27px;
padding-top: 40px;
padding-left: 70px;
}
h2 {
font-size: 13px;
font-weight: bold;
color: #fff;
height: 22px;
padding-top: 3px;
padding-left: 5px;
background: url(images/h2.jpg) no-repeat;
}
#maincontainer {
width: 1000px;
margin: 0 auto;
float: left;
}
#topsection {
background: url(images/header.jpg) no-repeat;
height: 283px;
}
#title {
margin: 0;
padding-top: 150px;
padding-left: 50px;
color: #FFFFFF;
font-size: 24px;
font-weight: bold;
}
#slogan {
margin-top: 10px;
padding-left: 50px;
font-size: 12px;
font-weight: bold;
color: #ff9a59;
}
#left_column {
float: left;
width: 229px;
}
#menu_top {
float: left;
height: 33px;
width: 229px;
background: url(images/menu_top.jpg) no-repeat;
}
#right_column {
float: right;
width: 651px;
padding-right: 20px;
height: auto
}
#destination {
float: left;
padding: 10px 10px 0px 40px;
width: 280px;
border-right: dotted 1px #782609;
}
#search {
float: right;
padding: 0px 30px 0px 0px;
width: 262px;
background: url(images/form-bg.jpg) repeat-y;
}
.search_top {
background: url(images/=search.jpg) no-repeat;
width: 262px;
height: 76px;
}
.search_mid {
margin: 0px;
padding-left: 10px;
padding-top: 0px;
}
.search_bot {
background: url(images/search_bot.jpg) no-repeat;
height: 11px;
}
#contact {
width: 200px;
height: 96px;
background: url(images/contact.jpg) no-repeat;
color: #fff;
padding-left: 29px;
padding-top: 15px;
}
#bot {
float: left;
height: 22px;
width: 877px;
}
#footer {
float: left;
width: 100%;
padding-top: 16px;
height: 31px;
color: #fff;
text-align: center;
background: url(images/footer_bg.jpg) repeat-x;
}
#footer a {
color: #fff;
font-weight: bold;
}
.menu {
margin-top: 40px;
width: 210px;
}
.menu li {
list-style: none;
height: 30px;
display: block;
background: url(images/menu_bg.jpg) no-repeat;
font-weight: bold;
font-size: 12px;
padding-left: 30px;
padding-top: 7px;
}
.menu a {
color: #fff;
text-decoration: none;
}
.menu a:hover {
color: #f08661;
}
.innertube {
margin: 40px;
margin-top: 0;
margin-bottom: 10px;
text-align: justify;
border-bottom: dotted 1px #782609;
}
.post_date {
color: #177212;
}
<body>
<script>
var BOO = 1;
var COIN = 1;
var MAP = 1;
var WATCH = 1;
var HARM = 1;
var GUITAR = 1;
var incrementCount = function() {
clicks++;
}
</script>
<div id="maincontainer">
<div id="topsection">
<div id="title">Welcome to Australia</div>
</div>
<div id="left_column">
<div id="menu_top"></div>
<div class="menu">
<ul>
<li><a href="aus.html">Home</a>
</li>
<li><a href="tourism.html">Tourism</a>
</li>
<li><a href="educationandindustry.html">Education and Industry</a>
</li>
<li><a href="culture.html">Culture</a>
</li>
<li><a href="gallery.html">Gallery</a>
</li>
<li><a href="giftshop.html">Gift Shop</a>
</li>
</ul>
</div>
<div id="contact">
<strong>QUICK CONTACT<br /></strong>
Tel: 001-100-1000
<br />Fax: 002-200-2000
<br />Email: info[at]company.com</div>
</div>
<br>
<br>
<div id="right_column">
<table>
<tr>
<td>
<img src="images/BOOMRANG.jpg" width="151" height="148">
</td>
<td class="echo">
<input type="text" form="esp" id="push" value="" size="2" />
</td>
<td>
<img src="images/coin.jpg" width="140" height="139">
</td>
<td class="echo">
<input type="text" form="esp" id="q2" value="" size="2" />
</td>
<td>
<img src="images/FLAG.jpg" width="175" height="152">
</td>
<td class="echo">
<input type="text" form="esp" id="q3" value="" size="2" />
</td>
</tr>
<tr>
<td>
<h3>Price: 10$</h3>
<input type="button" value="Add to Cart" onClick="incrementCount();" q1.value="1" '/>
</td><td></td>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick='COIN=1 ; q2.value="1" '/>
</td><td></td>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick='MAP=1 ; q3.value="1" '/>
</td><td></td>
</tr>
<tr>
<td><img src="images/watch.jpg" width="139" height="150"></td>
<td class="echo"><input type="text" form="esp" id="q4" value="" size="2" /></td>
<td><img src="images/harmoniam.jpg" width="147" height="131"></td>
<td class="echo"><input type="text" form="esp" id="q5" value="" size="2" /></td>
<td><img src="images/guitar.jpg" width="189" height="139"></td>
<td class="echo"><input type="text" form="esp" id="q6" value="" size="2" /></td>
</tr>
<tr>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick='WATCH=1 ; q4.value="1" '/>
</td><td></td>
<td>
<h3>Price: 30$</h3><input type="button" value="Add to Cart" onclick='HARM=1 ; q5.value="1" '/>
</td><td></td>
<td>
<h3>Price: 20$</h3><input type="button" value="Add to Cart" onclick='GUITAR=1 ; q6.value="1" '/>
</td><td></td>
</tr>
</table>
<p> </p>
<h2> TOTAL ITEMS: </h2>
<h2> TOTAL VALUE: </h2>
</div>
</div>
<div id="bot"></div>
</div>
<div id="footer">Copyright © Australia Expo</div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Travel Company Red - Free Website Template</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script>
var BOO={price:10,qty:0}
var COIN = {price:10,qty:0}
var MAP = {price:10,qty:0}
var WATCH = {price:10,qty:0}
var HARM = {price:10,qty:0}
var GUITAR = {price:10,qty:0}
var setTotalValue=function(){
var totalvalue=BOO.price*BOO.qty+COIN.price*COIN.qty+MAP.price*MAP.qty+WATCH.price*WATCH.qty+HARM.price*HARM.qty+GUITAR.price*GUITAR.qty;
document.getElementById('totalvalue').innerHTML=totalvalue;
}
var setTotalCount=function(){
var totalitems=BOO.qty+COIN.qty+MAP.qty+WATCH.qty+HARM.qty+GUITAR.qty;
document.getElementById('totalitems').innerHTML=totalitems;
}
var addBoo = function(){
BOO.qty++;
document.getElementById('q1').setAttribute("value",BOO.qty);
setTotalValue();
setTotalCount();
}
var addCoin = function(){
COIN.qty++;
document.getElementById('q2').setAttribute("value",COIN.qty);
setTotalValue();
setTotalCount();
}
var addMap = function(){
MAP.qty++;
document.getElementById('q3').setAttribute("value",MAP.qty);
setTotalValue();
setTotalCount();
}
var addWatch = function(){
WATCH.qty++;
document.getElementById('q4').setAttribute("value",WATCH.qty);
setTotalValue();
setTotalCount();
}
var addHarm = function(){
HARM.qty++;
document.getElementById('q5').setAttribute("value",HARM.qty);
setTotalValue();
setTotalCount();
}
var addGuitar = function(){
GUITAR.qty++;
document.getElementById('q6').setAttribute("value",GUITAR.qty);
setTotalValue();
setTotalCount();
}
</script>
<div id="maincontainer">
<div id="topsection">
<div id="title">Welcome to Australia</div>
</div>
<div id="left_column">
<div id="menu_top"></div>
<div class="menu">
<ul>
<li><a href="aus.html">Home</a></li>
<li><a href="tourism.html">Tourism</a></li>
<li><a href="educationandindustry.html">Education and Industry</a></li>
<li><a href="culture.html">Culture</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="giftshop.html">Gift Shop</a></li>
</ul></div>
<div id="contact">
<strong>QUICK CONTACT<br /></strong>
Tel: 001-100-1000<br />
Fax: 002-200-2000<br />
Email: info[at]company.com</div>
</div>
<br>
<br>
<div id="right_column">
<table>
<tr>
<td><img src="images/BOOMRANG.jpg" width="151" height="148"></td>
<td class="echo"><input type="text" form="esp" id="q1" value="" size="2" /></td>
<td><img src="images/coin.jpg" width="140" height="139"></td>
<td class="echo"><input type="text" form="esp" id="q2" value="" size="2" /></td>
<td><img src="images/FLAG.jpg" width="175" height="152"></td>
<td class="echo"><input type="text" form="esp" id="q3" value="" size="2" /></td>
</tr>
<tr>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onClick ="addBoo()"/>
</td><td></td>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick="addCoin()"/>
</td><td></td>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick="addMap()"/>
</td><td></td>
</tr>
<tr>
<td><img src="images/watch.jpg" width="139" height="150"></td>
<td class="echo"><input type="text" form="esp" id="q4" value="" size="2" /></td>
<td><img src="images/harmoniam.jpg" width="147" height="131"></td>
<td class="echo"><input type="text" form="esp" id="q5" value="" size="2" /></td>
<td><img src="images/guitar.jpg" width="189" height="139"></td>
<td class="echo"><input type="text" form="esp" id="q6" value="" size="2" /></td>
</tr>
<tr>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick="addWatch()"/>
</td><td></td>
<td>
<h3>Price: 30$</h3><input type="button" value="Add to Cart" onclick="addHarm()"/>
</td><td></td>
<td>
<h3>Price: 20$</h3><input type="button" value="Add to Cart" onclick="addGuitar()"/>
</td><td></td>
</tr>
</table>
<p> </p>
<h2> TOTAL ITEMS:<span id="totalitems"></span> </h2>
<h2> TOTAL VALUE: <span id="totalvalue"></span></h2>
</div>
</div>
<div id="bot"></div>
</div>
<div id="footer">Copyright © Australia Expo</div>
</body>
</html>
我正在开发网页。
我需要帮助将点击值加一。
我还需要帮助添加在 "number of items selected"
的某个部分中收集的所有项目的价格我想加上"Total amount section"中所有商品的总价。
当我点击 Add to cart 时，它会在文本框中显示加 1，但再次点击按钮时不会再添加更多。
body {
margin: 0;
padding: 0;
line-height: 1.5em;
background: #782609 url(images/body_bg.jpg) repeat-x;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
}
a:link,
a:visited {
color: #621c03;
text-decoration: none;
font-weight: bold;
}
a:active,
a:hover {
color: #621c03;
text-decoration: none;
font-weight: bold;
}
h1 {
font-size: 22px;
color: white;
font-weight: bold;
height: 27px;
padding-top: 40px;
padding-left: 70px;
}
h2 {
font-size: 13px;
font-weight: bold;
color: #fff;
height: 22px;
padding-top: 3px;
padding-left: 5px;
background: url(images/h2.jpg) no-repeat;
}
#maincontainer {
width: 1000px;
margin: 0 auto;
float: left;
}
#topsection {
background: url(images/header.jpg) no-repeat;
height: 283px;
}
#title {
margin: 0;
padding-top: 150px;
padding-left: 50px;
color: #FFFFFF;
font-size: 24px;
font-weight: bold;
}
#slogan {
margin-top: 10px;
padding-left: 50px;
font-size: 12px;
font-weight: bold;
color: #ff9a59;
}
#left_column {
float: left;
width: 229px;
}
#menu_top {
float: left;
height: 33px;
width: 229px;
background: url(images/menu_top.jpg) no-repeat;
}
#right_column {
float: right;
width: 651px;
padding-right: 20px;
height: auto
}
#destination {
float: left;
padding: 10px 10px 0px 40px;
width: 280px;
border-right: dotted 1px #782609;
}
#search {
float: right;
padding: 0px 30px 0px 0px;
width: 262px;
background: url(images/form-bg.jpg) repeat-y;
}
.search_top {
background: url(images/=search.jpg) no-repeat;
width: 262px;
height: 76px;
}
.search_mid {
margin: 0px;
padding-left: 10px;
padding-top: 0px;
}
.search_bot {
background: url(images/search_bot.jpg) no-repeat;
height: 11px;
}
#contact {
width: 200px;
height: 96px;
background: url(images/contact.jpg) no-repeat;
color: #fff;
padding-left: 29px;
padding-top: 15px;
}
#bot {
float: left;
height: 22px;
width: 877px;
}
#footer {
float: left;
width: 100%;
padding-top: 16px;
height: 31px;
color: #fff;
text-align: center;
background: url(images/footer_bg.jpg) repeat-x;
}
#footer a {
color: #fff;
font-weight: bold;
}
.menu {
margin-top: 40px;
width: 210px;
}
.menu li {
list-style: none;
height: 30px;
display: block;
background: url(images/menu_bg.jpg) no-repeat;
font-weight: bold;
font-size: 12px;
padding-left: 30px;
padding-top: 7px;
}
.menu a {
color: #fff;
text-decoration: none;
}
.menu a:hover {
color: #f08661;
}
.innertube {
margin: 40px;
margin-top: 0;
margin-bottom: 10px;
text-align: justify;
border-bottom: dotted 1px #782609;
}
.post_date {
color: #177212;
}
<body>
<script>
var BOO = 1;
var COIN = 1;
var MAP = 1;
var WATCH = 1;
var HARM = 1;
var GUITAR = 1;
var incrementCount = function() {
clicks++;
}
</script>
<div id="maincontainer">
<div id="topsection">
<div id="title">Welcome to Australia</div>
</div>
<div id="left_column">
<div id="menu_top"></div>
<div class="menu">
<ul>
<li><a href="aus.html">Home</a>
</li>
<li><a href="tourism.html">Tourism</a>
</li>
<li><a href="educationandindustry.html">Education and Industry</a>
</li>
<li><a href="culture.html">Culture</a>
</li>
<li><a href="gallery.html">Gallery</a>
</li>
<li><a href="giftshop.html">Gift Shop</a>
</li>
</ul>
</div>
<div id="contact">
<strong>QUICK CONTACT<br /></strong>
Tel: 001-100-1000
<br />Fax: 002-200-2000
<br />Email: info[at]company.com</div>
</div>
<br>
<br>
<div id="right_column">
<table>
<tr>
<td>
<img src="images/BOOMRANG.jpg" width="151" height="148">
</td>
<td class="echo">
<input type="text" form="esp" id="push" value="" size="2" />
</td>
<td>
<img src="images/coin.jpg" width="140" height="139">
</td>
<td class="echo">
<input type="text" form="esp" id="q2" value="" size="2" />
</td>
<td>
<img src="images/FLAG.jpg" width="175" height="152">
</td>
<td class="echo">
<input type="text" form="esp" id="q3" value="" size="2" />
</td>
</tr>
<tr>
<td>
<h3>Price: 10$</h3>
<input type="button" value="Add to Cart" onClick="incrementCount();" q1.value="1" '/>
</td><td></td>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick='COIN=1 ; q2.value="1" '/>
</td><td></td>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick='MAP=1 ; q3.value="1" '/>
</td><td></td>
</tr>
<tr>
<td><img src="images/watch.jpg" width="139" height="150"></td>
<td class="echo"><input type="text" form="esp" id="q4" value="" size="2" /></td>
<td><img src="images/harmoniam.jpg" width="147" height="131"></td>
<td class="echo"><input type="text" form="esp" id="q5" value="" size="2" /></td>
<td><img src="images/guitar.jpg" width="189" height="139"></td>
<td class="echo"><input type="text" form="esp" id="q6" value="" size="2" /></td>
</tr>
<tr>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick='WATCH=1 ; q4.value="1" '/>
</td><td></td>
<td>
<h3>Price: 30$</h3><input type="button" value="Add to Cart" onclick='HARM=1 ; q5.value="1" '/>
</td><td></td>
<td>
<h3>Price: 20$</h3><input type="button" value="Add to Cart" onclick='GUITAR=1 ; q6.value="1" '/>
</td><td></td>
</tr>
</table>
<p> </p>
<h2> TOTAL ITEMS: </h2>
<h2> TOTAL VALUE: </h2>
</div>
</div>
<div id="bot"></div>
</div>
<div id="footer">Copyright © Australia Expo</div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Travel Company Red - Free Website Template</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script>
var BOO={price:10,qty:0}
var COIN = {price:10,qty:0}
var MAP = {price:10,qty:0}
var WATCH = {price:10,qty:0}
var HARM = {price:10,qty:0}
var GUITAR = {price:10,qty:0}
var setTotalValue=function(){
var totalvalue=BOO.price*BOO.qty+COIN.price*COIN.qty+MAP.price*MAP.qty+WATCH.price*WATCH.qty+HARM.price*HARM.qty+GUITAR.price*GUITAR.qty;
document.getElementById('totalvalue').innerHTML=totalvalue;
}
var setTotalCount=function(){
var totalitems=BOO.qty+COIN.qty+MAP.qty+WATCH.qty+HARM.qty+GUITAR.qty;
document.getElementById('totalitems').innerHTML=totalitems;
}
var addBoo = function(){
BOO.qty++;
document.getElementById('q1').setAttribute("value",BOO.qty);
setTotalValue();
setTotalCount();
}
var addCoin = function(){
COIN.qty++;
document.getElementById('q2').setAttribute("value",COIN.qty);
setTotalValue();
setTotalCount();
}
var addMap = function(){
MAP.qty++;
document.getElementById('q3').setAttribute("value",MAP.qty);
setTotalValue();
setTotalCount();
}
var addWatch = function(){
WATCH.qty++;
document.getElementById('q4').setAttribute("value",WATCH.qty);
setTotalValue();
setTotalCount();
}
var addHarm = function(){
HARM.qty++;
document.getElementById('q5').setAttribute("value",HARM.qty);
setTotalValue();
setTotalCount();
}
var addGuitar = function(){
GUITAR.qty++;
document.getElementById('q6').setAttribute("value",GUITAR.qty);
setTotalValue();
setTotalCount();
}
</script>
<div id="maincontainer">
<div id="topsection">
<div id="title">Welcome to Australia</div>
</div>
<div id="left_column">
<div id="menu_top"></div>
<div class="menu">
<ul>
<li><a href="aus.html">Home</a></li>
<li><a href="tourism.html">Tourism</a></li>
<li><a href="educationandindustry.html">Education and Industry</a></li>
<li><a href="culture.html">Culture</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="giftshop.html">Gift Shop</a></li>
</ul></div>
<div id="contact">
<strong>QUICK CONTACT<br /></strong>
Tel: 001-100-1000<br />
Fax: 002-200-2000<br />
Email: info[at]company.com</div>
</div>
<br>
<br>
<div id="right_column">
<table>
<tr>
<td><img src="images/BOOMRANG.jpg" width="151" height="148"></td>
<td class="echo"><input type="text" form="esp" id="q1" value="" size="2" /></td>
<td><img src="images/coin.jpg" width="140" height="139"></td>
<td class="echo"><input type="text" form="esp" id="q2" value="" size="2" /></td>
<td><img src="images/FLAG.jpg" width="175" height="152"></td>
<td class="echo"><input type="text" form="esp" id="q3" value="" size="2" /></td>
</tr>
<tr>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onClick ="addBoo()"/>
</td><td></td>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick="addCoin()"/>
</td><td></td>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick="addMap()"/>
</td><td></td>
</tr>
<tr>
<td><img src="images/watch.jpg" width="139" height="150"></td>
<td class="echo"><input type="text" form="esp" id="q4" value="" size="2" /></td>
<td><img src="images/harmoniam.jpg" width="147" height="131"></td>
<td class="echo"><input type="text" form="esp" id="q5" value="" size="2" /></td>
<td><img src="images/guitar.jpg" width="189" height="139"></td>
<td class="echo"><input type="text" form="esp" id="q6" value="" size="2" /></td>
</tr>
<tr>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick="addWatch()"/>
</td><td></td>
<td>
<h3>Price: 30$</h3><input type="button" value="Add to Cart" onclick="addHarm()"/>
</td><td></td>
<td>
<h3>Price: 20$</h3><input type="button" value="Add to Cart" onclick="addGuitar()"/>
</td><td></td>
</tr>
</table>
<p> </p>
<h2> TOTAL ITEMS:<span id="totalitems"></span> </h2>
<h2> TOTAL VALUE: <span id="totalvalue"></span></h2>
</div>
</div>
<div id="bot"></div>
</div>
<div id="footer">Copyright © Australia Expo</div>
</body>
</html>