Kevin Chandarana Kevin Chandarana - 11 days ago 5
CSS Question

Javascrip Confusion

I am developing a webpage and I need help adding plus one to the value on click. I also need help adding the price of all the items that is collected in a section in the "number of items selected" and I want to add the total price of all the items in the "Total amount section".
When I click on Add to cart, it shows plus 1 in the text box but does not add more to it when clicked on the same button again.

I'm sorry it's my first time using such kind of support system. pardon me if I made any errors while asking the question



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




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