-3

I am developing a webpage.

I need help adding plus one to the value on click.

I also need help adding the price of all the items that are collected in a section in the "number of items selected"

I want to add the total price of all the items in the "Total amount section".

When I click on Add to cart once it shows plus 1 in the text box but does not add more to it when the button is clicked again.

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>
jsanchezs
  • 1,992
  • 3
  • 25
  • 51
Kevin Chandarana
  • 1
  • 2
  • 2
    Can you explain how your present code fails to achieve your goal, and what you think might be going wrong? It's best that you provide your initial findings first, rather than relying on readers to discover it all on their own. – Serlite Nov 28 '16 at 19:28
  • @Serlite 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. – Kevin Chandarana Nov 28 '16 at 19:30
  • 2
    Where is `clicks` defined? – Gavin Nov 28 '16 at 19:41
  • With regards to the code that is working, all you're currently doing is setting a variable to a static number, eg. `WATCH=1 ; q4.value="1"`. You should probably be using the addition operator somewhere if you're trying to increase a value. – Serlite Nov 28 '16 at 19:43
  • @Gavin I'm not really certain about the JavaScript bit. I'm new to it and I have just been picking pieces of codes from tutorials and websites and this is what I have been able to come up with so far. – Kevin Chandarana Nov 28 '16 at 19:44
  • @KevinChandarana You'll want to define `clicks` before using it e.g. `var clicks;` or `var clicks = 0;`. Otherwise, you're trying to increment a value that doesn't exist. – Gavin Nov 28 '16 at 19:46

1 Answers1

-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>
Britto Saji
  • 70
  • 3