Difficulty understanding JavaScript sum calculations

I am currently working on a website project.

Seeking assistance to enable an increment of one when clicked.

Also need guidance on calculating the total price of items collected in a designated section under "number of items selected".

Goal is to display the total price of all items in the specified section labeled "Total amount".

Encountering an issue where clicking the Add to cart button shows only one item added, without increasing upon subsequent clicks.

#website {
  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>

javascripthtmlcsscumulative-sum

Answer №1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Explore Nature Adventure - Free Website Template</title>
<meta name="keywords" content="nature, adventure, travel" />
<meta name="description" content="Free website template for exploring nature and adventure trips." />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script> 
       var TENT={price:15,qty:0}
       var CAMPFIRE = {price:10,qty:0} 
       var BINOCULARS = {price:20,qty:0} 
       var MAP = {price:12,qty:0} 
       var HIKINGBOOTS = {price:25,qty:0} 
       var CAMERA = {price:30,qty:0}
       var setTotalValue=function(){
        var totalvalue=TENT.price*TENT.qty+CAMPFIRE.price*CAMPFIRE.qty+BINOCULARS.price*BINOCULARS.qty+MAP.price*MAP.qty+HIKINGBOOTS.price*HIKINGBOOTS.qty+CAMERA.price*CAMERA.qty;
        document.getElementById('totalvalue').innerHTML=totalvalue;
       }
       var setTotalCount=function(){
        var totalitems=TENT.qty+CAMPFIRE.qty+BINOCULARS.qty+MAP.qty+HIKINGBOOTS.qty+CAMERA.qty;
        document.getElementById('totalitems').innerHTML=totalitems;
       }
       var addTent = function(){
        TENT.qty++;
        document.getElementById('q1').setAttribute("value",TENT.qty);
        setTotalValue();
        setTotalCount();
        }
        var addCampfire = function(){
        CAMPFIRE.qty++;
        document.getElementById('q2').setAttribute("value",CAMPFIRE.qty);
        setTotalValue();
        setTotalCount();
        }
        var addBinoculars = function(){
        BINOCULARS.qty++;
        document.getElementById('q3').setAttribute("value",BINOCULARS.qty);
        setTotalValue();
        setTotalCount();
        }
        var addMap = function(){
        MAP.qty++;
        document.getElementById('q4').setAttribute("value",MAP.qty);
        setTotalValue();
        setTotalCount();
        }
        var addHikingBoots = function(){
        HIKINGBOOTS.qty++;
        document.getElementById('q5').setAttribute("value",HIKINGBOOTS.qty);
        setTotalValue();
        setTotalCount();
        }
        var addCamera = function(){
        CAMERA.qty++;
        document.getElementById('q6').setAttribute("value",CAMERA.qty);
        setTotalValue();
        setTotalCount();
        }
    </script>
<div id="maincontainer">
<div id="topsection">
  <div id="title">Discover the Wilderness Adventures</div>
</div>
<div id="left_column">
  <div id="menu_top"></div>
  <div class="menu"> 
  <ul>
    <li><a href="explore.html">Explore</a></li>
    <li><a href="trails.html">Trails</a></li>
    <li><a href="activities.html">Activities</a></li>
    <li><a href="guides.html">Guides</a></li>
    <li><a href="shop.html">Shop</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul></div>
  <div id="contact">
    <strong>CONNECT WITH US<br /></strong>
Tel: 123-456-7890<br />
Fax: 234-567-8901<br />
Email: info[at]company.com</div>
</div>
<br>
<br>
<div id="right_column">
  <table>
    <tr>
        <td><img src="images/tent.jpg" width="151" height="148"></td>
        <td class="echo"><input type="text" form="esp" id="q1" value="" size="2" /></td>
        <td><img src="images/campfire.jpg" width="140" height="139"></td>
        <td class="echo"><input type="text" form="esp" id="q2" value="" size="2" /></td>
        <td><img src="images/binoculars.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: 15$</h3><input type="button" value="Add to Cart" onClick ="addTent()"/>
        </td><td></td>
        <td>
            <h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick="addCampfire()"/>
        </td><td></td>
        <td>
            <h3>Price: 20$</h3><input type="button" value="Add to Cart" onclick="addBinoculars()"/>
        </td><td></td>
    </tr>
    <tr>
        <td><img src="images/map.jpg" width="139" height="150"></td>
        <td class="echo"><input type="text" form="esp" id="q4" value="" size="2" /></td>
        <td><img src="images/hikingboots.jpg" width="147" height="131"></td>
        <td class="echo"><input type="text" form="esp" id="q5" value="" size="2" /></td>
        <td><img src="images/camera.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: 12$</h3><input type="button" value="Add to Cart" onclick="addMap()"/>
        </td><td></td>
        <td>
            <h3>Price: 25$</h3><input type="button" value="Add to Cart" onclick="addHikingBoots()"/>
        </td><td></td>
        <td>
            <h3>Price: 30$</h3><input type="button" value="Add to Cart" onclick="addCamera()"/>
        </td><td></td>
    </tr>
  </table>
  <p> </p>
  <h2> TOTAL ITEMS:<span id="totalitems"></span> <h2> TOTAL VALUE: <span id="totalvalue"></span></h2>
    </div>

</div>
<div id="bot"></div>
</div>
<div id="footer">Copyright © Nature Explorers</div>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for successfully passing a parameter to the --world-parameters or npm run command for it to be utilized by scripts within the package

Although there are similar questions already asked, I still have a specific scenario that I need help with: In the example I am working on, I am using this repository and I have a script block in my package.json as follows: I want to be able to pass a pa ...

javascriptnpmtestcafecucumberjsnpm-scripts

`The Art of Binding() with Objects Created on the Fly`

Currently facing challenges with rebinding something using a dynamically created object from prepend. Despite trying several methods, I am only able to unbind. Seeking assistance. $(document).ready(function(){ $(".newdir").click(function(){ $(".d-exp ...

javascriptjquerybinding

A numerical input field that removes non-numeric characters without removing existing numbers?

Currently, I have implemented the following code: <input type="text" onkeyup="this.value = this.value.replace(/\D/g, '')"> This code restricts users from entering anything other than numbers into a field on my webpage. However, I hav ...

javascriptjqueryhtml

When submitting a form with a contenteditable div and text box using JQuery, the POST request is not

I developed a website that allows users to edit and format text, then save it onto the server. Utilizing jquery to send the data to a PHP page for saving, I encountered an issue where the site fails to send the file name along with the formatted text to PH ...

javascriptphpjqueryhtmltext-editor

ConfirmUsername is immutable | TypeScript paired with Jest and Enzyme

Currently, I am experimenting with Jest and Enzyme on my React-TS project to test a small utility function. While working on a JS file within the project, I encountered the following error: "validateUsername" is read-only. Here is the code for the utilit ...

javascriptreactjstypescriptjestjsenzyme

The functionality of displaying and hiding elements in HTML using jQuery is not functioning as expected

When I implemented the .toggle() functionality in jQuery on the content, I encountered a problem where clicking on the "read more" button caused the text link to disappear and the first paragraph to become invisible. Below is the jQuery code snippet: $( ...

jqueryhtml

Accessing variables in subfunctions proves challenging for Node.js

Here is a function I've been working on to calculate the total price for a checkout process. However, when I console.log() the variable before it is returned, I get 0. But if I log the variable inside the findOne() function, I get the correct value. ...

javascriptnode.js

Patience is key when waiting for the outcome of an async Javascript function in order to obtain a result (Could it be

Hey there, I've been searching for a solution to my problem even though it's been discussed before. I'm trying to achieve something simple: creating a string like distance is : " + CalculateDistance(position);. The desired result should look ...

javascriptjqueryjquery-deferreddeferred

What is the best way to align a value within CardActions in Material UI?

I'm currently facing an issue with my website design. Here's a snapshot of how it looks: Additionally, here is the code snippet related to the problem: <CardActions> <Typography style={{ fontWeight: 'bold', c ...

cssmaterial-ui

nodemon keeps attempting to restart the server after making changes to files, but the updates are not being reflected

I've been using the nodemon package, but I'm experiencing issues with it not restarting the server properly. Instead of showing "server running" after making changes like in tutorials, all it displays is "restarting due to changes". This also res ...

javascriptexpressnpmvisual-studio-codenodemon

Why is this dropdown list extending beyond the window?

Why is my dropdown list extending beyond the window? Despite trying to change the position of the dropdown list elements to fixed and top:0px, I am still facing this issue! I am unable to figure out why the list is going off the page. Your help in solvin ...

jqueryhtmlcss

Are you familiar with manipulating Arrays or Objects in jQuery?

In JavaScript, we can create objects with keys as strings for similar functionality to an associate array. Check out this example here. For example: ".home-title":[ ["font-size","12px"], ["line-height","16px"], ], However, if you need a ...

javascriptjqueryarraysjsonobject

What is the best way to incorporate a linear gradient into the background image using bootstrap?

I'm working on a react app and I'd like to apply a linear gradient of 0.7 to the background image using bootstrap. Can anyone help me with this? <Carousel.Item> <img className='banner-bg d-block w-100 bg-dark bg-gradient &apo ...

cssreactjsreact-bootstrapbootstrap-5

Filter jQuery search results for classes with identical names

I am new to using jQuery, so please excuse my lack of experience. My current challenge involves 'getting a reference to an object wrapped in a class', but there are multiple classes with the same name. How can I specifically target and retrieve t ...

javascriptjqueryangularjs

The "(click)" event doesn't fire upon clicking a material icon

After creating an <a> tag with a (click) event function call, I noticed that the click event works everywhere except for the arrows mat-icons within the code snippet below: <span *ngIf="section.pages.length>0"> <mat-icon *ngIf="secti ...

htmlangularangular-material

What is the best way to incorporate a <c:forEach> loop into JSP operations?

I am attempting to calculate the product of two variables that are associated with an item in a loop. Below is the code snippet from the JSP file: <table> <thead> <tr> <th>PRICE</th> <th ...

javascripthtmljspjstl

Ways to access elements and their associated values in a JavaScript Array

I'm facing a challenge with a JavaScript array where I need to extract teams (Team A, Team B) and organize them into one array while preserving their order. See below for the current output of the array, as well as the JS code provided and the expecte ...

javascriptarraysjsonvue.js

Leveraging JavaScript for Validating Radio Buttons

I've been following a tutorial guide on this specific website , but I'm encountering some difficulties despite following the exact steps outlined. Can someone provide guidance? Here is what I have done: <html> <script> fu ...

phpjavascripthtml

Unable to specify a particular <div> for fetching data using jQuery AJAX in ASP.NET

While working on the following Javascript code, I encountered an issue where the text specified inside the CommentItem div I am appending is not displaying. However, my main concern revolves around targeting ContainerPh which is located above the txtCommen ...

c#javascriptjqueryasp.netajax

Convert a JSON object into a new format with a nested hierarchy

The JSON object below is currently formatted as follows: { "id": "jsonid", "attributes": { "personName": { "id": "name1", "group": "1.1" }, "ag ...

javascriptjson