Question

我正在开发一个网页。

我需要帮助在点击时添加加1。

我还需要帮助添加所选项目中收集的所有项目的价格＆＃34;所选项目数量＆＃34;

我想在＆＃34;总金额部分＆＃34;中添加所有项目的总价。

当我在文本框中显示加1时点击Add to cart，但在再次点击该按钮时不会添加更多内容。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

<!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>

关于和值的Javascript混淆

1 个答案: