2016-11-28 90 views
-3

我正在開發一個網頁。關於總和值的Javascript混淆

我需要幫助添加加上一個點擊的值。

我還需要幫助將所有收集到部分

我要添加的所有項目的總價格中的「總量節「選擇商品數量」的項目的價格」。

當我點擊Add to cart一旦在文本框中顯示加號1,但再次單擊該按鈕時不會再添加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" '/> 
 
    \t \t </td><td></td> 
 
    \t \t <td> 
 
    \t \t \t <h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick='COIN=1 ; q2.value="1" '/> 
 
    \t \t </td><td></td> 
 
    \t \t <td> 
 
    \t \t \t <h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick='MAP=1 ; q3.value="1" '/> 
 
    \t \t </td><td></td> 
 
    \t </tr> 
 
    \t <tr> 
 
    \t \t <td><img src="images/watch.jpg" width="139" height="150"></td> 
 
    \t \t <td class="echo"><input type="text" form="esp" id="q4" value="" size="2" /></td> 
 
    \t \t <td><img src="images/harmoniam.jpg" width="147" height="131"></td> 
 
    \t \t <td class="echo"><input type="text" form="esp" id="q5" value="" size="2" /></td> 
 
    \t \t <td><img src="images/guitar.jpg" width="189" height="139"></td> 
 
    \t \t <td class="echo"><input type="text" form="esp" id="q6" value="" size="2" /></td> 
 
    \t </tr> 
 
    \t <tr> 
 
    \t \t <td> 
 
\t \t <h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick='WATCH=1 ; q4.value="1" '/> 
 
    \t \t </td><td></td> 
 
    \t \t <td> 
 
    \t \t \t <h3>Price: 30$</h3><input type="button" value="Add to Cart" onclick='HARM=1 ; q5.value="1" '/> 
 
    \t \t </td><td></td> 
 
    \t \t <td> 
 
    \t \t \t <h3>Price: 20$</h3><input type="button" value="Add to Cart" onclick='GUITAR=1 ; q6.value="1" '/> 
 
    \t \t </td><td></td> 
 
    \t </tr> 
 
    </table> 
 
    <p>&nbsp;</p> 
 
    <h2> TOTAL ITEMS: </h2> 
 
    <h2> TOTAL VALUE: </h2> 
 
\t </div> 
 

 
</div> 
 
<div id="bot"></div> 
 
</div> 
 
<div id="footer">Copyright © Australia Expo</div> 
 
</body> 
 
</html>

+2

你能解釋一下你現在的代碼是如何失敗的,以實現自己的目標,你認爲什麼可能會錯了嗎?最好先提供初步結果,而不要依賴讀者自己發現。 – Serlite

+0

@Serlite當我點擊添加到購物車時,它會在文本框中顯示加1,但再次點擊同一個按鈕時不會添加更多內容。 –

+2

定義了「點擊」的位置? – Gavin

回答

-3
<!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>&nbsp;</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>